<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>loading...</title>
    <link rel="stylesheet" href="dist/styles/iview.css">
    <link rel="stylesheet" href="css/ion.rangeSlider.min.css">
    <link rel="stylesheet" href="./maptalks/maptalks.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        
        [v-cloak] {
            display: none;
        }
        
        html .ivu-drawer-body {
            padding: 8px;
        }
        
        #container .ivu-tabs {
            overflow: visible;
        }
        
        #container .ivu-tabs-bar {
            padding-bottom: 8px;
            margin-bottom: 8px;
        }
        
        #container .ivu-table td {
            height: 25px;
        }
        
        #container .ivu-table th {
            height: 25px;
        }
        
        div.master-wraper {
            position: absolute;
            top: 0px;
            left: 0;
            right: 0;
            bottom: 260px;
        }
        /* 控制器 */
        
        div.collapse-wrap {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: #2D8CF0;
            width: 16px;
            height: 40px;
            border-radius: 0px 8px 8px 0px;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
        }
        
        div.collapse-wrap i {
            font-size: 16px;
            color: #ffffff;
        }
        
        div.ctrl-wraper {
            position: absolute;
            top: 0px;
            left: 0;
            width: 325px;
            bottom: 0px;
            border-right: 1px solid #E0E0E0;
            border-bottom: 1px solid #E0E0E0;
        }
        
        @media screen and (max-height: 770px) {
            /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
            #container div.ctrl-wraper {
                overflow-y: auto;
                position: absolute;
                top: 0px;
                left: 0;
                width: 325px;
                bottom: 0px;
                border-right: 1px solid #E0E0E0;
                border-bottom: 1px solid #E0E0E0;
            }
        }
        
        div.map-icon-wrapper {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: rgba(203, 233, 245, 0.6);
            border-radius: 7px;
        }
        
        div.map-icon-wrapper>div {
            width: 36px;
            cursor: pointer;
            margin: 5px;
        }
        
        div.map-icon-wrapper>div>div:first-child {
            height: 36px;
            width: 36px;
        }
        
        div.map-icon-wrapper>div>div:first-child>img {
            border: 0;
            height: 100%;
            height: 100%;
        }
        
        div.map-icon-wrapper>div>div:last-child {
            width: 36px;
        }
        
        div.map-icon-wrapper>div>div:last-child>img {
            border: 0;
            width: 100%;
        }
        
        div.ctrl-wraper>div {
            width: 301px;
            margin: 5px 10px;
        }
        
        div.map-wraper .device {
            width: auto;
            height: 25px;
            position: relative;
            cursor: pointer;
        }
        
        div.map-wraper .device-name {
            width: auto;
            height: 25px;
            line-height: 25px;
            border-left: 6px solid #2D8CF0;
            font-size: 14px;
            font-weight: 600px;
            padding-left: 5px;
            padding-right: 5px;
            background-color: #FFFBE5;
        }
        /* 日历 开始*/
        
        div.calendar {
            width: 301px;
            margin: 5px 10px 0 10px;
        }
        
        div.calendar-header {
            height: 35px;
            background-color: #2D8CF0;
            color: #ffffff;
            display: flex;
            flex-direction: row;
        }
        
        div.year-month {
            flex: 1;
            line-height: 35px;
            text-align: center;
            font-size: 15px;
            font-weight: 550;
        }
        
        div.prve-month,
        div.next-month {
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            cursor: pointer;
        }
        
        div.calendar-inner-wrap {
            overflow: hidden;
        }
        
        div.calendar-inner-wrap div.week-wrap {
            height: 36px;
            background-color: #f9f9f9;
        }
        
        div.calendar-inner-wrap div.week-wrap>div {
            float: left;
            width: 43px;
            line-height: 36px;
            text-align: center;
        }
        
        .dates-wrap {
            border-top: 1px solid #DDDDDD;
            border-right: 1px solid #DDDDDD;
            overflow: hidden;
        }
        
        .dates-wrap>div {
            float: left;
            width: 42.8px;
            height: 36px;
            box-sizing: border-box;
            border-left: 1px solid #DDDDDD;
            border-bottom: 1px solid #DDDDDD;
        }
        
        .dates-wrap>div>div {
            text-align: center;
        }
        
        .dates-wrap>div>div>div.date {
            height: 20px;
            font-size: 14px;
            line-height: 20px;
        }
        
        .dates-wrap>div>div>div.mileage {
            height: 16px;
            font-size: 12px;
            line-height: 16px;
        }
        
        .active-day {
            background: #2D8CF0;
            color: #ffffff;
        }
        
        .noTheMonth {
            opacity: 0.5;
        }
        /* 日历 结束*/
        /* 地图  */
        
        .el-zoom-in-bottom-enter-active,
        .el-zoom-in-bottom-leave-active {
            opacity: 1;
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
            -webkit-transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1);
            transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .3s cubic-bezier(.23, 1, .32, 1), -webkit-transform .3s cubic-bezier(.23, 1, .32, 1);
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
        }
        
        .el-zoom-in-bottom-enter,
        .el-zoom-in-bottom-leave-active {
            opacity: 0;
            -webkit-transform: scaleY(0);
            transform: scaleY(0)
        }
        
        div.map-wraper {
            position: absolute;
            left: 325px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            background-color: #f9f9f9;
            border-bottom: 1px solid #E0E0E0;
            overflow: hidden;
        }
        
        div.park-wraper {
            position: absolute;
            right: 10px;
            bottom: 90px;
            width: 430px;
        }
        
        div.close-btn {
            position: absolute;
            right: 0px;
            top: 1px;
            width: 25px;
            height: 30px;
            border-radius: 15px;
            z-index: 999;
            cursor: pointer;
        }
        
        p>span.window_title {
            color: #4096D1;
        }
        
        #map {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        
        div.map-wraper div.play_ctrl_wrap {
            position: absolute;
            width: 760px;
            bottom: 20px;
            height: 50px;
            left: 50%;
            margin-left: -380px;
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.6);
        }
        
        div.play_ctrl_wrap div.tracks_len {
            height: 100%;
            width: 100%;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #ffffff;
            font-weight: 600;
        }
        
        div.map-tool-wraper {
            background: #fff;
            margin: 10px 0;
            width: 90px;
            text-align: center;
            line-height: 20px;
            height: 22px;
            border-radius: 3px;
            border: 1px solid #DCDEE2;
        }
        
        div.map-tool-wraper:hover {
            border: 1px solid #57a3f3;
        }
        /* tab 页  */
        
        div.tab-wraper {
            position: absolute;
            left: 0;
            right: 0;
            height: 260px;
            bottom: 0px;
            background: #f3f3f3;
        }
        /* 请求地址 */
        
        .demo-spin-container {
            display: inline-block;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, .6);
            z-index: 19999;
        }
        
        .demo-spin-icon-load {
            animation: ani-demo-spin 1s linear infinite;
        }
        
        div.selected-map-wrap {
            height: 46px;
            width: 46px;
            background-color: rgba(203, 233, 245, 0.6);
            cursor: pointer;
            padding: 5px;
            border-radius: 7px;
        }
        
        div.selected-map-wrap div.map-icon {
            width: 36px;
            height: 36px;
        }
        
        div.selected-map-wrap div.map-icon>img {
            width: 100%;
            height: 100%;
            border: 0;
        }
        
        div.selected-map-inner {
            height: 36px;
            width: 36px;
            position: relative;
            overflow: hidden;
        }
        
        div.selected-map-list {
            position: absolute;
            top: 46px;
            left: 0px;
            right: 0px;
            background-color: rgba(203, 233, 245, 0.6);
            z-index: 99;
            border-radius: 7px;
            overflow: hidden;
        }
        
        div.selected-map-list>div {
            padding: 5px;
        }
        
        div.selected-map-list>div:hover {
            background-color: #FCF0C0;
        }
        
        div.selected-map-list>div.actived {
            background-color: #FCF0C0;
        }
        
        div.map-selector-popup {
            position: absolute;
            right: 46px;
            width: 155px;
            height: 60px;
            padding: 5px 0px 5px 5px;
            box-shadow: 0 0 5px 0 rgb(0 0 0 / 10%);
            background-color: rgba(203, 233, 245, 0.6);
        }
        
        .MapSelector_item_193IR {
            height: 50px;
            width: 50px;
            float: left;
            border: 1px solid;
            cursor: pointer;
            position: relative;
            margin-right: 5px;
        }
        
        .satellite-map {
            background: url(./images/model-satel.png) no-repeat;
            background-position: 50%;
        }
        
        .normal-map {
            background: url(./images/model-map.png) no-repeat;
            background-position: 50%;
        }
        
        .map_icon_traffic_off {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_traffic_on {
            background: url() no-repeat;
            background-position: center 3px;
        }
        
        .map_icon_xiansu_off {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_icon_xiansu_on {
            background: url() no-repeat;
            background-position: center 4px;
        }
        
        .map_selector_icon_text {
            position: absolute;
            bottom: 1px;
            left: 1px;
            right: 1px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
        }
        
        .no_selected_icon {
            background-color: rgba(255, 255, 255, 0.7);
        }
        
        .selected_icon {
            background-color: rgba(64, 150, 209, 0.9);
            color: rgb(255, 255, 255);
        }
        
        div.maptalks-attribution {
            display: none;
        }
        
        .ivu-modal-wrap .irs--flat .irs-line {
            background-color: transparent !important;
        }
        
        .ivu-modal-wrap .irs--round .irs-line {
            background-color: transparent !important;
        }
        
        .ivu-modal-wrap .irs--flat .irs-bar {
            background-color: green !important;
        }
        
        .ivu-modal-wrap .irs--round .irs-bar {
            background-color: green !important;
        }
        
        .ivu-modal-wrap .slider-left {
            position: absolute;
            /* top: 25px; */
            /* height: 12px; */
            top: 36px;
            height: 4px;
            border-radius: 4px 0 0 4px;
            background-color: red;
            left: 0px;
        }
        
        .ivu-modal-wrap .slider-right {
            position: absolute;
            /* top: 25px; */
            top: 36px;
            right: 0px;
            height: 4px;
            /* height: 12px; */
            border-radius: 0 4px 4px 0;
            background-color: #960BA3;
        }
        
        #container .ivu-spin-fix {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .ctrl-btn-img {
            width: 36px;
            height: 36px;
            cursor: pointer;
        }
        
        .map-mark {
            position: absolute;
            right: 10px;
            top: 280px;
        }
        
        .map-mark .map-mark-close {
            height: 50px;
            width: 20px;
            padding: 5px 0px;
            background-color: #34598A;
            border-radius: 10px 0px 0px 10px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .map-mark .map-mark-close>div {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            color: #ffffff;
        }
        
        .map-mark .map-mark-wrapper {
            width: 230px;
        }
        
        .map-mark .map-mark-header {
            height: 40px;
            position: relative;
        }
        
        .map-mark .map-mark-header .mark-close-btn {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 20px;
            border-radius: 10px 0px 0px 0px;
            background-color: #34598A;
            cursor: pointer;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
        
        .map-mark-header-content {
            position: absolute;
            left: 20px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background-color: #7F8FA7;
        }
        
        .map-mark-header-content>div {
            position: absolute;
            height: 0px;
            width: 0px;
            border-top: 6px solid transparent;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
            position: absolute;
            bottom: 0px;
            left: 20px;
        }
        
        .map-mark .map-mark-content {
            background-color: #ffffff;
            width: 100%;
            height: 200px;
            border-left: 1px solid #e3e3e3;
            border-right: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
            position: relative;
        }
        
        .map-mark .map-mark-content-search {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            height: 30px;
            padding-top: 6px;
        }
        
        .map-mark .map-mark-inner-content {
            position: absolute;
            left: 0px;
            right: 0px;
            bottom: 0px;
            top: 30px;
            overflow-y: auto;
            padding: 0px 5px;
        }
    </style>
</head>

<body>
    <div id="container" v-cloak>
        <div class="demo-spin-container" v-if="loading">
            <Spin size="large" fix></Spin>
        </div>
        <Modal v-model="markerOilTableModal" width="800">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('oil.refuelingAndOilLeakage')}}</span>
            </p>
            <i-table :columns="oilColumns" :data="oilTable" height="400" border></i-table>
            <div slot="footer">
                <div v-text="statisticalOil" style="text-align: right;"></div>
            </div>
        </Modal>
        <Modal v-model="markerModal" width="500">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-create-outline"></Icon>
                <span>{{$t('oil.editMarker')}}</span>
            </p>
            <Row style="margin:10px 0;">
                <i-col span="5" style="line-height: 32px;text-align: right;">
                    {{$t('oil.remarks')}}:
                </i-col>
                <i-col span="14" offset="1">
                    <i-input v-model.trim="marker"></i-input>
                </i-col>
            </Row>
            <div slot="footer" style="text-align:center;">
                <i-button type="primary" style="width: 240px" @click="editOilRecord">{{$t('oil.submit')}}</i-button>
            </div>
        </Modal>
        <div class="master-wraper">
            <div class="ctrl-wraper" :style="{display:isCollapse?'none':'block'}">
                <div class="calendar">
                    <div class="calendar-header">
                        <div class="prve-month" @click="prevMonth">
                            <Icon type="ios-arrow-back" :size="20" />
                        </div>
                        <div class="year-month">
                            <span v-text="year"></span>
                            <span>-</span>
                            <span v-text="month"></span>
                        </div>
                        <div class="next-month" @click="nextMonth">
                            <Icon type="ios-arrow-forward" :size="20" />
                        </div>
                    </div>
                    <div class="calendar-inner-wrap">
                        <div class="week-wrap">
                            <div v-for="item in weekList" :key="item" v-text="item"></div>
                        </div>
                        <div class="dates-wrap">
                            <div v-for="(item , index) in datesArr" :key="index" :style="{background:item.isTheMonth?'#f9f9f9':''}">
                                <div class="full" :class="{noTheMonth:!item.isTheMonth}" :style="{cursor:item.isTheMonth?'pointer':''}" @click="onClickDate(item)">
                                    <div v-text="item.day" :class="{'active-day':item.dateStr == dateStr && item.isTheMonth }" class="date"></div>
                                    <div v-text="item.mileage" :class="{'active-day':item.day == date && item.isTheMonth, }" :style="{color:item.mileage != '-'?'#94D2A5':'#000'}" class="mileage"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <Row>
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("main.startTime")}}:&nbsp;</i-col>
                        <i-col span="19" style="height: 100%;line-height:32px;">
                            <Date-Picker type="datetime" v-model="startTimeValue" style="width: 100%">
                            </Date-Picker>
                        </i-col>
                    </Row>
                    <Row style="margin-top: 5px;">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("main.endTime")}}:&nbsp;</i-col>
                        <i-col span="19" style="height: 100%;line-height:32px;">
                            <Date-Picker type="datetime" v-model="endTimeValue" style="width: 100%">
                            </Date-Picker>
                        </i-col>
                    </Row>
                    <Row style="margin-top: 5px;">
                        <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("main.stayTime")}}:&nbsp;</i-col>
                        <i-col span="18" style="height: 100%;line-height:32px;">
                            <i-select v-model="interval">
                                <i-option value="3">3</i-option>
                                <i-option value="5">5</i-option>
                                <i-option value="10">10</i-option>
                                <i-option value="30">30</i-option>
                                <i-option value="60">60</i-option>
                            </i-select>
                        </i-col>
                        <i-col span="1" style="height: 100%;text-align:right;line-height:32px;">m</i-col>
                    </Row>
                </div>
                <div>
                    <div>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:28px;">{{$t("main.trackType")}}:&nbsp;</i-col>
                            <i-col span="19" style="height: 100%;line-height:28px;">
                                <Radio-Group v-model="trackType">
                                    <Radio label="exact" style="width:71.34px;">
                                        <span>GPS</span>
                                    </Radio>
                                    <Radio label="all">
                                        <span>{{$t("main.all")}}</span>
                                    </Radio>
                                </Radio-Group>
                            </i-col>
                        </Row>
                    </div>
                    <div>
                        <Row>
                            <i-col span="5" style="height: 100%;text-align:right;line-height:28px;">{{$t("main.showLine")}}:&nbsp;</i-col>
                            <i-col span="19" style="height: 100%;line-height:28px;">
                                <Radio-Group v-model="isShowAllLine">
                                    <Radio label="yes" style="width:71.34px;">
                                        <span>{{$t("main.yes")}}</span>
                                    </Radio>
                                    <Radio label="no">
                                        <span>{{$t("main.no")}}</span>
                                    </Radio>
                                </Radio-Group>
                            </i-col>
                        </Row>
                    </div>
                    <div>
                        <Row>
                            <i-col span="12" style="height: 100%;text-align:center;line-height:32px;">
                                <i-button type="primary" style="width:140px" @click="queryTracks" icon="ios-search">{{$t("main.queryTracks")}}</i-button>
                            </i-col>
                            <i-col span="12" style="height: 100%;text-align:center;line-height:32px;">
                                <i-button type="primary" style="width:140px" icon="ios-download-outline" @click="exportData">{{$t("main.downloadTrack")}}</i-button>
                            </i-col>
                        </Row>
                    </div>
                </div>
            </div>
            <div class="map-wraper" ref="mapWraper" :style="{left:isCollapse?'0px':'325px'}">
                <div id="map"></div>
                <div class="collapse-wrap" v-show="!isFullScreen" @click="isCollapse=!isCollapse">
                    <i v-if="isCollapse" class="ivu-icon ivu-icon-ios-arrow-forward"></i>
                    <i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i>
                </div>
                <div class="play_ctrl_wrap">
                    <Row>
                        <i-col span="5">
                            <div class="tracks_len" style="color: #ffffff;font-size: 14px;">
                                {{$t("main.mileage")}}:{{totalMileage}}Km
                            </div>
                        </i-col>
                        <i-col span="5">
                            <div v-if="currentTracksLenth == 0" class="tracks_len">
                                <span v-text="currentMarkerIndex"></span>
                                <span v-text="'/'"></span>
                                <span v-text="currentTracksLenth"></span>
                            </div>
                            <div v-else class="tracks_len">
                                <span> {{ currentMarkerIndex + 1 }}</span>
                                <span v-text="'/'"></span>
                                <span v-text="currentTracksLenth"></span>
                            </div>
                        </i-col>
                        <i-col span="4" style="padding-top: 7px;text-align: center;">
                            <img src="./images/map/play.png" class="ctrl-btn-img" @click="startedPlay">
                            <img src="./images/map/stop.png" class="ctrl-btn-img" @click="stopPlay">
                        </i-col>
                        <i-col span="4" style="padding-top: 7px;text-align: center;">
                            <img src="./images/map/previous.png" class="ctrl-btn-img" @click="prveSpeed">
                            <img src="./images/map/next.png" class="ctrl-btn-img" @click="nextSpeed">
                        </i-col>
                        <i-col span="6" style="line-height: 50px;text-align: center;">
                            <Button-Group>
                                <i-button :type="playSpeed=='man'?'primary':'default'" @click="playSpeed='man'">
                                    <span>{{$t("main.slow")}}</span>
                                </i-button>
                                <i-button :type="playSpeed=='zhong'?'primary':'default'" @click="playSpeed='zhong'">
                                    <span>{{$t("main.middle")}}</span>
                                </i-button>
                                <i-button :type="playSpeed=='kuai'?'primary':'default'" @click="playSpeed='kuai'">
                                    <span>{{$t("main.fast")}}</span>
                                </i-button>
                            </Button-Group>
                        </i-col>
                    </Row>
                </div>
                <div style="position: absolute; left:10px;top:10px;" class="device" @click="copyToClipboard">
                    <div class="device-name">
                        <span v-text="devicenameAndId"></span>
                    </div>
                </div>
                <div style="position: absolute; right:75px;top:20px;">
                    <div>
                        <selected-map @select-map="onSelectMap" @switch-traffic="onSwitchTraffic"></selected-map>
                    </div>
                    <!-- <div class="map-tool-wraper">
                        <Checkbox v-model="isShowBubble">{{$t("main.showBubbles")}}</Checkbox>
                    </div>
                    <div class="map-tool-wraper">
                        <Checkbox v-model="isOpenDistance">{{$t("main.openRanging")}}</Checkbox>
                    </div>
                    <div class="map-tool-wraper">
                        <Checkbox v-model="isFullScreen">{{$t("main.fullScreen")}}</Checkbox>
                    </div>
                    <div class="map-tool-wraper">
                        <Checkbox v-model="isShowFence">{{$t("main.showFence")}}</Checkbox>
                    </div> -->
                </div>

                <div class="map-icon-wrapper">
                    <div @click="isShowBubble=!isShowBubble" :title='$t("main.showBubbles")'>
                        <div>
                            <img :src="isShowBubble?'./images/map/popinfo_on.png':'./images/map/popinfo_off.png'">
                        </div>
                    </div>
                    <div @click="isOpenDistance=!isOpenDistance" :title='$t("main.openRanging")'>
                        <div>
                            <img :src="isOpenDistance?'./images/map/ranging_on.png':'./images/map/ranging_off.png'">
                        </div>
                    </div>
                    <div @click="handleMapSizeChange" :title='$t("main.fullScreen")'>
                        <div>
                            <img :src="isFullScreen?'./images/map/fullscreen_on.png':'./images/map/fullscreen_off.png'">
                        </div>
                    </div>
                    <div @click="isShowFence=!isShowFence" :title='$t("main.showFence")'>
                        <div>
                            <img :src="isShowFence?'./images/map/geofence_on.png':'./images/map/geofence_off.png'">
                        </div>
                    </div>
                    <div @click="isShowPark=!isShowPark" :title='$t("main.showPark")'>
                        <div>
                            <img :src="isShowPark?'./images/map/parking.png':'./images/map/parking_off.png'">
                        </div>
                    </div>
                    <div @click="zoomout" :title='$t("main.zoomout")'>
                        <div>
                            <img src="./images/map/zoomout.png">
                        </div>
                    </div>
                    <div @click="zoommin" :title='$t("main.zoomin")'>
                        <div>
                            <img src="./images/map/zoomin.png">
                        </div>
                    </div>
                </div>


                <transition name="el-zoom-in-bottom">
                    <div v-if="drawerModal" class="park-wraper">
                        <div class="close-btn" @click="drawerModal=false">
                            <Icon type="ios-close-circle-outline" size="24" />
                        </div>
                        <i-table :columns="parkColumns" size="small" height="300" :data="parkList" border @on-row-click="selectedParking"></i-table>
                    </div>
                </transition>

                <map-mark @on-select-fence="onSelectFence"></map-mark>

            </div>
        </div>
        <div class="tab-wraper">
            <Tabs v-model="tabActive" :animated="true">
                <tab-pane :label="$t('main.chart')" name="chart">
                    <div id="charts" style="width: '100%';height: 200px;"></div>
                </tab-pane>
                <tab-pane :label="$t('main.trackList')" name="table">
                    <div id="track-table" style="padding: 0 10px;">
                        <i-table ref="table" border :columns="columns" height="170" :data="tableData"></i-table>
                        <Page :total="total" show-total @on-change="onPageChange" :page-size="pageSize" :current="currentIndex" />
                    </div>
                </tab-pane>
                <i-button type="primary" size="small" slot="extra" style="margin:10px 5px 0 0;" @click="drawerModal=!drawerModal">{{$t("main.stayList")}} </i-button>
                <i-button type="primary" size="small" slot="extra" style="margin:10px 5px 0 0;" @click="mileageEditorModal=true">{{$t("oil.mileageEditor")}} </i-button>
                <i-button type="primary" size="small" slot="extra" style="margin:10px 5px 0 0;" v-show="isHasOil" @click="markerOilTableModal=true">{{$t("oil.oilRemarks")}} </i-button>
                <i-button type="primary" size="small" slot="extra" style="margin:10px 5px 0 0;" @click="settingModal=true">{{$t("main.setting")}}</i-button>
                <i-button v-show="tabActive=='table'" type="primary" size="small" slot="extra" style="margin:10px 5px 0 0;" @click="getAllTracksAddress">{{$t("main.queryAddress")}}</i-button>
            </Tabs>
        </div>
        <Modal v-model="modal" width="600">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <Icon type="ios-hammer-outline"></Icon>
                <span>{{$t("main.posiDetail")}}</span>
            </p>
            <div>
                <p style="margin: 10px">{{$t("main.trackId")}} : {{trackid}}</p>
                <p style="margin: 10px">{{$t("main.jizhanList")}} : {{xList}}</p>
                <p style="margin: 10px">{{$t("main.WIFIList")}} : {{wList}}</p>
                <p style="margin: 10px;word-wrap:break-word;">{{$t("main.originalData")}} : {{trackStringify}}</p>
            </div>
        </Modal>
        <Modal v-model="modal1" width="600">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <Icon type="ios-hammer-outline"></Icon>
                <span>{{$t("main.result")}}</span>
            </p>
            <div style="text-align: center;">
                <p>
                    {{cause}}
                </p>
            </div>
        </Modal>
        <Modal v-model="settingModal" width="600">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <Icon type="ios-hammer-outline"></Icon>
                <span>{{$t("main.setting")}}</span>
            </p>
            <div style="text-align: center;">
                <div style="position: relative;height: 60px;">
                    <div style="position: absolute;left: 0px;right: 0px;bottom: 0px;top: 0px;">
                        <div class="slider-left" :style="{width:sliderLeft}"></div>
                        <div class="slider-right" :style="{left:sliderLeft}"></div>
                    </div>
                    <div style="position: absolute;left: 0px;right: 0px;bottom: 0px;top: 0px;">
                        <div id="slider_wrapper"></div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <i-button type="primary" @click="setSpeedLimitColors" style="width: 100%;">{{$t("main.comfirm")}}</i-button>
            </div>
        </Modal>
        <Modal v-model="mileageEditorModal" width="600">
            <p slot="header" style="color:#2D8CF0;text-align:center">
                <span>{{$t("oil.mileageEditorTitle")}}</span>
            </p>
            <div style="text-align: center;">
                <Row style="margin: 10px 0px;">
                    <i-col span="4" offset="2" style="line-height: 32px;">{{$t("mileage.date")}}</i-col>
                    <i-col span="12">
                        <Date-Picker type="date" disabled v-model="today" style="width: 100%" :options="dateOptions"></Date-Picker>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0px;">
                    <i-col span="4" offset="2" style="line-height: 32px;">{{$t("mileage.todayMileage")}}</i-col>
                    <i-col span="12">
                        <i-input v-model="todayMileage" disabled style="width: 100%"></i-input>
                    </i-col>
                    <i-col span="1" style="line-height: 32px;">Km</i-col>
                </Row>
                <Row style="margin: 10px 0px;">
                    <i-col span="4" offset="2" style="line-height: 32px;">{{$t("mileage.recalculateMileage")}}</i-col>
                    <i-col span="12">
                        <i-input v-model="recalculateMileage" disabled style="width: 100%"></i-input>
                    </i-col>
                    <i-col span="1" style="line-height: 32px;">Km</i-col>
                </Row>
                <!-- <Row style="margin: 10px 0px;">
                    <i-col span="4" offset="2" style="line-height: 32px;">{{$t("mileage.mapMileage")}}</i-col>
                    <i-col span="12">
                        <i-input v-model="mapMileage" disabled style="width: 100%"></i-input>
                    </i-col>
                    <i-col span="1" style="line-height: 32px;">Km</i-col>
                </Row> -->
                <Row style="margin: 10px 0px;">
                    <i-col span="4" offset="2" style="line-height: 32px;">{{$t("mileage.confirmMileage")}}</i-col>
                    <i-col span="12">
                        <i-input v-model="confirmMileage" style="width: 100%"></i-input>
                    </i-col>
                    <i-col span="1" style="line-height: 32px;">Km</i-col>
                </Row>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-button type="info" @click="recalMileage" style="width: 250px;" :loading="recalMileageLoading">{{$t("mileage.recalculation")}}</i-button>
                <i-button type="primary" @click="editTotalMileage" style="width: 250px;">{{$t("mileage.submit")}}</i-button>
            </div>
        </Modal>



        <div class="demo-spin-container" v-if="queryLoading">
            <Spin fix>
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <!-- <div>查询进度:{{idx}}/{{currentTracksLenth+1}}</div> -->
            </Spin>
        </div>
    </div>

    <script type="text/x-template" id="selected-map-template">
        <div class="selected-map-wrap" v-click-outside.capture="onClickOutside">
            <div class="selected-map-inner" @click="isShowMapList=true">
                <div class="map-icon" :title="mapTypeStr"><img :src="mapIcon"></div>
            </div>
            <div class="selected-map-list" v-show="isShowMapList">
                <div v-for="(item,index) in mapSelectorList" :data-index="index" :class="{actived:mapType==item.value}" :key="index" @click="selectedMap(index)">
                    <div class="map-icon" :title="item.label">
                        <img :src="item.src">
                    </div>
                </div>
            </div>
            <div class="map-selector-popup" v-show="isShowMapList" :style="mapSelectorPopupSty">
                <div v-if="false" class="MapSelector_item_193IR" :class="{'map_icon_xiansu_off':!isShowXianSu,'map_icon_xiansu_on':isShowXianSu}" style="width:35px" @click="isShowXianSu=!isShowXianSu">
                    <div class="map_selector_icon_text no_selected_icon">{{speed}}</div>
                </div>
                <div class="MapSelector_item_193IR" :class="{'map_icon_traffic_off':!isShowTraffic,'map_icon_traffic_on':isShowTraffic}" style="width:35px" @click="isShowTraffic=!isShowTraffic">
                    <div class="map_selector_icon_text no_selected_icon">{{traffic}}</div>
                </div>
                <div class="MapSelector_item_193IR normal-map" @click="isSatelliteMap=false">
                    <div class="map_selector_icon_text" :class="{'selected_icon':!isSatelliteMap,'no_selected_icon':isSatelliteMap}">{{map}}</div>
                </div>
                <div class="MapSelector_item_193IR satellite-map" @click="isSatelliteMap=true">
                    <div class="map_selector_icon_text" :class="{'selected_icon':isSatelliteMap,'no_selected_icon':!isSatelliteMap}">{{satellite}}</div>
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-template" id="map-mark-template">
        <div class="map-mark">
            <div v-if="isClose" class="map-mark-close" @click="isClose=false">
                <div>{{isZh?'标':'M'}}</div>
                <div>{{isZh?'注':'K'}}</div>
            </div>
            <div v-else class="map-mark-wrapper">
                <div class="map-mark-header">
                    <div class="mark-close-btn" @click="isClose=true">
                        <Icon type="ios-arrow-forward" size="18" />
                    </div>
                    <div class="map-mark-header-content">
                        <div></div>
                    </div>
                </div>
                <div class="map-mark-content">
                    <div class="map-mark-content-search">
                        <Row>
                            <i-col span="17" offset="1">
                                <i-input v-model.trim="sosoValue" size="small" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" @on-click="onClickIcon"></i-input>
                            </i-col>
                            <i-col span="4" offset="1">
                                <i-button type="primary" size="small" @click="setCustomMarker">{{$t('main.manage')}}</i-button>
                            </i-col>
                        </Row>
                    </div>
                    <div class="map-mark-inner-content">
                        <Tree :data="treeData" show-checkbox @on-check-change="onCheckChange"></Tree>
                    </div>
                </div>
            </div>
        </div>
    </script>

    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="./js/gps51-jquery.js"></script>
    <script src="./js/ion.rangeSlider.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/vue-i18n.min.js"></script>
    <script src="./js/hashmap.js"></script>
    <script src="./js/localcachemgr.js"></script>
    <script src="./js/transformlatlon.js"></script>
    <script src="./js/dateformat.js"></script>
    <script src="js/v-click-outside-x.js"></script>
    <script src="./js/util.js"></script>
    <script src="./js/js.cookie.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/locale/index.js"></script>
    <script src="./maptalks/maptalks.min.js"></script>
    <script src="js/zh-CN.js"></script>
    <script src="js/en-US.js"></script>
    <script src="./js/protobuf.js"></script>
    <script src="./js/xlsx.full.min.js"></script>
    <script src="./js/myxlsx.js"></script>
    <script src="./js/RespQueryDeviceTrackProto.js"></script>
    <script>
        var timeDifference = DateFormat.getOffset();
        var token = utils.getParameterByName("token");
        var icon = utils.getParameterByName("icon");
        var userName = utils.getParameterByName("username");
        var playbackLineWidth = Number(utils.getParameterByName("playbacklinewidth"));
        var deviceid = utils.getParameterByName("deviceid");
        var devicename = utils.getParameterByName("devicename");
        var functionslong = utils.getParameterByName("functionslong");
        var vRoot = null;
        var editObjectRow = null;
        var isHasOil = utils.hasFunction(Number(functionslong), 0x0200);
        var currentTrack = null;
        var symbol = {
            'lineColor': '#41B883',
            'lineWidth': playbackLineWidth ? playbackLineWidth : 2,
            'polygonFill': 'rgb(135,196,240)',
            'polygonOpacity': 0
        };
        Vue.use(iview);
        Vue.use(VueI18n);
        var isZh = utils.locale === 'zh';
        document.title = devicename + ' | ' + (isZh ? "轨迹回放" : "History Playback");
        iview.lang(isZh ? 'zh-CN' : 'en-US');


        function queryTrackDetail(deviceid) {
            var data = {
                deviceid: deviceid,
                updatetime: currentTrack.updatetime,
                trackid: currentTrack.trackid
            };
            var url = myUrls.queryTrackDetail();
            utils.sendAjax(url, data, function(resp) {
                if (resp.status == 0) {
                    vRoot.xList = resp.track.x ? resp.track.x : isZh ? '空' : 'Empty';
                    vRoot.wList = resp.track.w ? resp.track.w : isZh ? '空' : 'Empty';
                    vRoot.trackid = resp.track.trackid;
                    vRoot.trackStringify = JSON.stringify(resp);
                    vRoot.modal = true;
                } else {
                    vRoot.$Message.error("error");
                }
            });
        };

        function refreshTrackPosition(deviceid) {
            var trackid = currentTrack.trackid;
            var data = {
                deviceid: deviceid,
                updatetime: currentTrack.updatetime,
                trackid: currentTrack.trackid
            };
            var url = myUrls.refreshTrackPosition();
            utils.sendAjax(url, data, function(resp) {
                if (resp.status === 0) {
                    vRoot.$Message.success(isZh ? "刷新成功" : "Refresh success");
                    localStorage.setItem(deviceid + '-' + trackid, true);
                } else {
                    vRoot.modal1 = true;
                    vRoot.cause = resp.cause;
                }
            });
        };
        var messages = {
            defaultLang: 'zh',
            en: {
                monitor: {
                    reLogin: "Please re-login and automatically jump to the login page in 2 seconds",
                },
                main: {
                    manage: 'Manage',
                    comfirm: "Comfirm",
                    all: 'All',
                    showLine: 'Trace',
                    yes: 'Yes',
                    no: 'No',
                    queryTracks: 'Query',
                    downloadTrack: 'Download',
                    progress: 'Progress',
                    bmap: 'BaiDuMap',
                    gmap: 'GoogleMap',
                    amap: 'AMap',
                    chart: 'Chart',
                    trackList: 'Track List',
                    queryAddress: 'Query Address',
                    setting: 'Set Track Color',
                    showBubbles: 'Bubbles',
                    openRanging: 'Distance ',
                    fullScreen: 'Full screen ',
                    showFence: 'Fence',
                    showPark: 'Park',

                    selectDate: "Select Date",
                    selectTime: "Select Time",
                    startTime: "Start Time",
                    stayTime: "Stay time",
                    stayList: "Stay List",
                    endTime: "End Time",
                    trackType: "Mode",
                    prevDay: "Prev Day",
                    nextDay: "Next Day",
                    startDate: "Start time",
                    endDate: "End time",
                    queryBtn: "Query",
                    playSpeed: "Play Speed",
                    msec: "ms",
                    play: "Play",
                    pause: "Pause",
                    replay: "Replay",
                    prevStep: "Prev step",
                    nextStep: "Next step",
                    empty: "Empty",
                    refreshSuccess: "Refresh success",
                    posiDetail: "Positon details",
                    trackId: "Track ID",
                    jizhanList: "Base station",
                    WIFIList: "WiFi",
                    originalData: "Original Data",
                    result: "Position result",
                    totalOil: 'Total Driving Fuel',
                    notRunOil: 'Other Fuel',
                    oil1: "Tank1",
                    oil2: "Tank2",
                    oil3: "Tank3",
                    oil4: "Tank4",
                    weight: 'Weight',
                    status: "Device Status",
                    reissue: "Reissue",
                    oil: "Fuel",
                    speed: 'Speed',
                    mileage: 'Mileage',
                    time: 'Time',
                    noCurruntDayTrack: "There is no track of the day",
                    slow: 'slow',
                    middle: 'middle',
                    fast: 'fast',
                    success: 'Set successfully',
                    error: 'Setup failed',
                    zoomout: "Zoomout",
                    zoomin: "Zoomin",
                },
                reportForm: {
                    d: "day",
                    h: "h",
                    m: "m",
                    s: "s",
                },
                oil: {
                    editMarker: 'Edit Marker',
                    remarks: 'Remarks',
                    submit: 'Submit',
                    refuelingAndOilLeakage: 'Refueling and oil leakage',
                    oilRemarks: 'Oil Records',
                    mileageEditor: 'Mileage editor',
                    mileageEditorTitle: 'Mileage editor',

                },
                mileage: {
                    date: 'Date',
                    todayMileage: 'Today Mileage',
                    recalculateMileage: 'Recalc Mileage',
                    mapMileage: 'Map Mileage',
                    confirmMileage: 'Confirm Mileage',
                    recalculation: 'Recalc',
                    submit: 'Submit',
                }
            },
            zh: {
                monitor: {
                    reLogin: "请重新登录,2秒后自动跳转登录页面",
                },
                main: {
                    manage: '管理',
                    comfirm: "确定",
                    all: '全部',
                    showLine: '显示路线',
                    yes: '是',
                    no: '否',
                    queryTracks: '查询轨迹',
                    downloadTrack: '下载轨迹',
                    progress: '查询进度',
                    bmap: '百度地图',
                    gmap: '谷歌地图',
                    amap: '高德地图',
                    chart: '曲线图表',
                    trackList: '轨迹列表',
                    queryAddress: '一键查询地址',
                    setting: '设置轨迹颜色',
                    showBubbles: '显示气泡',
                    openRanging: '开启测距',
                    fullScreen: '地图全屏',
                    showFence: '显示围栏',
                    showPark: '显示停留点',

                    selectDate: "选择日期",
                    selectTime: "选择时间",
                    startTime: "开始时间",
                    stayTime: "停留时长",
                    stayList: "停留列表",
                    endTime: "结束时间",
                    trackType: "轨迹精度",
                    prevDay: "上一天",
                    nextDay: "下一天",
                    startDate: "开始时间",
                    endDate: "结束时间",
                    queryBtn: "查询轨迹",
                    playSpeed: "播放速度",
                    msec: "毫秒",
                    play: "播放",
                    pause: "暂停",
                    replay: "重播",
                    prevStep: "上一步",
                    nextStep: "下一步",
                    empty: "空",
                    refreshSuccess: "刷新成功",
                    posiDetail: "定位详情",
                    trackId: "轨迹序号",
                    jizhanList: "基站列表",
                    WIFIList: "WiFi列表",
                    originalData: "原始数据",
                    result: "定位结果",
                    totalOil: '行驶油液',
                    notRunOil: '非行驶油液',
                    oil1: "油液1",
                    oil2: "油液2",
                    oil3: "油液3",
                    oil4: "油液4",
                    weight: "载重",
                    status: "状态",
                    reissue: "补传",
                    oil: "油液",
                    speed: '速度',
                    mileage: '里程',
                    time: '时间',
                    noCurruntDayTrack: "没有当天轨迹",
                    slow: '慢',
                    middle: '中',
                    fast: '快',
                    success: '设置成功',
                    error: '设置失败',

                    zoomout: "放大",
                    zoomin: "缩小",
                },
                reportForm: {
                    d: "天",
                    h: "小时",
                    m: "分",
                    s: "秒",
                },
                oil: {
                    editMarker: '编辑备注',
                    remarks: '备注',
                    submit: '提交',
                    refuelingAndOilLeakage: '加油漏油',
                    oilRemarks: '加漏油液体记录',
                    mileageEditor: '里程调整',
                    mileageEditorTitle: '当日里程调整',
                },
                mileage: {
                    date: '时间',
                    todayMileage: '当日里程',
                    recalculateMileage: '重算里程',
                    mapMileage: '地图里程',
                    confirmMileage: '确认里程',
                    recalculation: '重算',
                    submit: '提交',
                }
            }
        };

        (function() { //utils.getAngle
            var YES = "yes";
            var NO = "no";
            var mapType = utils.getMapType();

            Vue.component('map-mark', {
                props: {
                    mapIns: {
                        type: Object,
                        default: function() {
                            return {}
                        }
                    }
                },
                data: function() {
                    return {
                        isZh: isZh,
                        isClose: true,
                        sosoValue: '',
                        treeData: [],

                    }
                },
                methods: {
                    onClickIcon: function() {
                        this.sosoValue = '';
                        this.treeData = deepClone(this.copyTreeData);
                    },
                    onCheckChange: function(arr, node) {
                        var reuslt = [];
                        arr.forEach(function(item) {
                            if (!item.children) {
                                reuslt.push(item);
                            }
                        })
                        var uuids = [];
                        var showstate = node.checked ? 1 : 0;
                        if (node.children) {
                            node.children.forEach(function(item) {
                                uuids.push(item.custommarkeruuid)
                            });
                        } else {
                            uuids.push(node.custommarkeruuid)
                        }
                        this.setCustomMarkerShow(uuids, showstate);
                        this.$emit('on-select-fence', reuslt);
                    },
                    setCustomMarkerShow: function(uuids, showstate) {
                        var url = myUrls.setCustomMarkerShow();
                        var data = {
                            uuids: uuids,
                            showstate: showstate
                        }
                        utils.sendAjax(url, data, function() {});
                    },
                    sosoValueChange: function() {
                        if (this.sosoValue == '') {
                            this.treeData = deepClone(this.copyTreeData);
                        } else {
                            this.filterMethod(this.sosoValue);
                        }
                    },
                    filterMethod: function(sosoValue) {
                        var treeData = [];
                        this.copyTreeData.forEach(function(gourp) {
                            var copyGroup = deepClone(gourp);
                            copyGroup.expand = true;
                            copyGroup.checked = false;
                            if (gourp.title.indexOf(sosoValue) != -1) {
                                treeData.push(copyGroup);
                            } else {
                                copyGroup.children = [];
                                gourp.children.forEach(function(item) {
                                    if (item.title.indexOf(sosoValue) != -1) {
                                        var copyitem = deepClone(item);
                                        copyitem.checked = false;
                                        copyGroup.children.push(copyitem)
                                    }
                                })
                                if (copyGroup.children.length) {
                                    treeData.push(copyGroup);
                                }
                            }
                        })
                        this.treeData = treeData;
                    },
                    setCustomMarker: function() {
                        var url = 'setcustommarker.html?token=' + token + '&username=' + userName;
                        window.open(url);
                    },
                    queryCustomMarkerRecords: function() {
                        var url = myUrls.queryCustomMarkerRecords(),
                            me = this;
                        utils.sendAjax(url, {}, function(resp) {
                            if (resp.status == 0) {
                                if (resp.categorys) {
                                    me.filterOriginalData(resp.categorys);
                                }
                            }
                        })
                    },
                    filterOriginalData: function(categorys) {
                        var originalData = [];
                        categorys.forEach(function(item) {
                            var treeItem = {
                                title: item.name,
                                categoryid: item.categoryid,
                                children: [],
                            };
                            item.records.forEach(function(record) {
                                record.title = record.name;
                                record.categoryid = item.categoryid;
                                treeItem.children.push(record);
                            });
                            originalData.push(treeItem);
                        });

                        var treeData = [];
                        var selected = [];
                        categorys.forEach(function(item) {
                            var treeItem = {
                                title: item.name,
                                categoryid: item.categoryid,
                                children: [],
                            };
                            item.records.forEach(function(record) {
                                var checked = record.showstate == 1 ? true : false;
                                record.title = record.name;
                                record.categoryid = item.categoryid;
                                record.checked = checked;
                                treeItem.children.push(record);
                                if (checked) {
                                    selected.push(record);
                                }
                            });
                            treeData.push(treeItem);
                        });
                        this.copyTreeData = originalData;
                        this.treeData = treeData;
                        this.$emit('on-select-fence', selected);
                    },
                },
                mounted: function() {
                    var me = this;
                    me.queryCustomMarkerRecords();
                },
                template: document.getElementById('map-mark-template').innerHTML
            })


            Vue.component('selected-map', {
                data: function() {
                    return {
                        isShowMapList: false, //是否显示选择框
                        isSatelliteMap: false, //是否卫星地图
                        isShowXianSu: false,
                        isShowTraffic: false,
                        mapSelectorList: [{
                            label: isZh ? "百度地图" : "BaiduMap",
                            value: "bMap",
                            src: './images/map/bMap.png',
                        }, {
                            label: isZh ? "高德地图" : "AMap",
                            value: "aMap",
                            src: './images/map/aMap.png',
                        }, {
                            label: isZh ? "国内谷歌" : "gChinaMap",
                            value: "gChinaMap",
                            src: './images/map/gChinaMap.png',
                        }, {
                            label: isZh ? "谷歌地图" : "GoogleMap",
                            value: "gMap",
                            src: './images/map/gMap.png',
                        }, ],
                        speed: isZh ? "限速" : "Speed",
                        traffic: isZh ? "路况" : "Traffic",
                        map: isZh ? "地图" : "Map",
                        satellite: isZh ? "卫星" : "Satellite",
                        currentMapIndex: 0,
                        mapType: mapType
                    }
                },
                methods: {
                    onClickOutside: function() {
                        this.isShowMapList = false;
                    },
                    selectedMap: function(index) {

                        var item = this.mapSelectorList[index];
                        this.mapType = item.value;
                        this.$emit('select-map', {
                            mapType: item.value,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                        this.currentMapIndex = index;
                    },
                    getCurrentMapIndex: function() {
                        var index = 0;
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                index = i;
                                break;
                            }
                        }
                        return index;
                    }
                },
                computed: {
                    mapIcon: function() {
                        return './images/map/' + this.mapType + '.png';
                    },
                    mapTypeStr: function() {
                        var mapTypeStr = '';
                        for (var i = 0; i < this.mapSelectorList.length; i++) {
                            var item = this.mapSelectorList[i];
                            if (item.value == this.mapType) {
                                mapTypeStr = item.label;
                                break;
                            }
                        }
                        return mapTypeStr;
                    },
                    mapSelectorPopupSty: function() {
                        var top = 46;
                        var currentMapIndex = this.currentMapIndex;
                        var maxCurrentIndex = this.mapSelectorList.length - 1;

                        top = top * (currentMapIndex + 1);

                        if (currentMapIndex == maxCurrentIndex) {
                            top -= 14;
                        }

                        return {
                            top: top + 'px'
                        }
                    }
                },
                watch: {
                    isSatelliteMap: function() {
                        this.$emit('select-map', {
                            mapType: this.mapType,
                            xiansu: this.isShowXianSu,
                            traffic: this.isShowTraffic,
                            satelliteMap: this.isSatelliteMap
                        });
                    },
                    isShowXianSu: function(newVal) {
                        this.$emit('switch-xiansu', newVal);
                    },
                    isShowTraffic: function(newVal) {
                        this.$emit('switch-traffic', newVal);
                    },
                },
                mounted: function() {
                    this.currentMapIndex = this.getCurrentMapIndex();
                },
                template: document.getElementById('selected-map-template').innerHTML
            })

            var columns = [{
                title: isZh ? '序号' : 'Index',
                key: 'idx',
                width: 70
            }, {
                title: isZh ? '时间' : 'Date',
                key: 'updatetimeStr',
                width: 154
            }, {
                title: isZh ? '定位类型' : 'Got',
                key: 'gotsrcStr',
                width: 100
            }, {
                title: isZh ? '速度' : 'Speed',
                key: 'speedStr',
                width: 80
            }, {
                title: isZh ? '记录仪速度' : 'Rec Speed',
                key: 'recorderspeedStr',
                width: 100
            }, {
                title: isZh ? '里程(Km)' : 'Mileage(Km)',
                key: 'totaldistance',
                width: 110
            }, {
                title: isZh ? '经度' : 'Lon',
                key: 'callon',
                width: 95
            }, {
                title: isZh ? '纬度' : 'Lat',
                key: 'callat',
                width: 95
            }, {
                title: isZh ? '方向' : 'Direction',
                key: 'direction',
                width: 95
            }, {
                title: isZh ? '状态' : 'Status',
                key: 'strstatus',
                width: 200,
            }, {
                title: isZh ? '地址' : 'Address',
                key: 'address',
                width: 450,
            }]



            vRoot = new Vue({
                el: "#container",
                i18n: utils.getI18n(),
                data: {
                    modal: false,
                    modal1: false,
                    drawerModal: false,
                    mileageEditorModal: false,
                    settingModal: false,
                    isCollapse: false,
                    sliderValue: [30, 80],
                    cause: "",
                    xList: '',
                    wList: '',
                    trackid: '',
                    trackStringify: "",
                    interval: '3',
                    today: new Date(),
                    isHasOil: isHasOil,
                    markerModal: false,
                    markerOilTableModal: false,
                    marker: '',
                    statisticalOil: '',
                    oilColumns: [{
                        title: isZh ? '编号' : 'index',
                        key: 'index',
                        width: 70
                    }, {
                        title: isZh ? '油路' : 'oilindex',
                        key: 'oilindexStr',
                        width: 80
                    }, {
                        width: 80,
                        title: (isZh ? '状态' : 'Status'),
                        key: 'oilStatus'
                    }, {
                        width: 90,
                        title: (isZh ? '油量' : 'Oil Volume') + '(L)',
                        key: 'oilVolume'
                    }, {
                        width: 105,
                        title: (isZh ? '开始油量' : 'oilindex') + '(L)',
                        key: 'soil'
                    }, {
                        width: 105,
                        title: (isZh ? '结束油量' : 'oilindex') + '(L)',
                        key: 'eoil'
                    }, {
                        width: 160,
                        title: isZh ? '开始时间' : 'oilindex',
                        key: 'begintimeStr'
                    }, {
                        width: 160,
                        title: isZh ? '结束时间' : 'oilindex',
                        key: 'endtimeStr'
                    }, {
                        width: 150,
                        title: isZh ? '备注' : 'oilindex',
                        key: 'marker'
                    }, {
                        title: isZh ? '操作' : 'action',
                        width: 105,
                        render: function(h, params) {
                            var row = params.row;
                            return h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: function() {
                                        vRoot.marker = row.marker;
                                        vRoot.markerModal = true;
                                        editObjectRow = row;
                                    }
                                }
                            }, isZh ? '编辑备注' : 'Edit')
                        }
                    }, ],
                    oilTable: [],

                    queryLoading: false,
                    idx: 0,
                    isPlaying: false,
                    loading: false,
                    isShowBubble: true,
                    isOpenDistance: false,
                    isFullScreen: false,
                    isShowFence: false,
                    isShowPark: false,
                    currentMarkerIndex: 0,
                    currentTracksLenth: 0,
                    trackType: 'exact',
                    isShowAllLine: 'yes',
                    mapType: mapType, // BMap GMap AMap;
                    deviceid: deviceid,
                    devicename: devicename,
                    playSpeed: 'zhong',
                    year: 1970,
                    month: 1,
                    date: 1,
                    dateOptions: {
                        disabledDate: function(date) {
                            return (date && date.valueOf()) > Date.now();
                        }
                    },
                    weekList: isZh ? ["日", "一", "二", "三", "四", "五", "六"] : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    datesArr: [],
                    timeValue: ['00:00:00', '23:59:59'],
                    startTimeValue: DateFormat.format(new Date(), 'yyyy-MM-dd') + " 00:00:00",
                    endTimeValue: DateFormat.format(new Date(), 'yyyy-MM-dd') + " 23:59:59",
                    tabActive: 'chart',
                    columns: columns,
                    tableData: [],
                    total: 0,
                    pageSize: 10,
                    currentIndex: 1,
                    totalMileage: 0,
                    todayMileage: 0,
                    recalculateMileage: 0,
                    mapMileage: 0,
                    recalMileageLoading: false,
                    confirmMileage: 0,
                    parkColumns: [{
                        title: '#',
                        key: 'index',
                        width: 55
                    }, {
                        title: isZh ? '开始时间' : 'Start Time',
                        key: 'starttime',
                        width: 90
                    }, {
                        title: isZh ? '结束时间' : 'End Time',
                        key: 'endtime',
                        width: 90
                    }, {
                        title: isZh ? '停留时长' : 'Duration',
                        key: 'duration',
                        width: 125,
                    }, {
                        title: isZh ? '地址' : 'Address',
                        key: 'address',
                        width: 500
                    }, ],
                    parkList: [],
                },
                methods: {
                    zoomout: function() {
                        var zoom = this.map.getZoom();
                        zoom++;
                        if (zoom > 19) {
                            zoom = 19
                        }
                        this.map.setZoom(zoom);
                    },
                    zoommin: function() {
                        var zoom = this.map.getZoom();
                        zoom--;
                        if (zoom < 4) {
                            zoom = 4
                        }
                        this.map.setZoom(zoom);
                    },
                    selectedParking: function(item) {
                        var me = this;
                        var markers = this.parkingVectorLayer.getGeometries(item.markerid);
                        markers.forEach(function(marker) {
                            if (marker.index == item.index) {
                                if (me.isShowBubble && me.isShowPark) {
                                    var sContent = me.getInfoWindowContent(item.item);
                                    marker.setInfoWindow({
                                        'content': sContent,
                                        'width': 330,
                                        'autoOpenOn': 'click', //set to null if not to open when clicking on marker
                                        'autoCloseOn': false, //set to null if not to open when clicking on marker
                                        'animation': false,
                                        'autoPan': false,
                                        'animationDuration': 0,
                                    });
                                    marker.openInfoWindow();
                                }
                                me.currentMarkerIndex = me.getCurruntTrackIndex(marker.item.updatetime);
                                me.map.setCenter(marker.getCoordinates());

                            }
                        })

                    },
                    setSpeedLimitColors: function() {
                        var me = this;
                        var url = myUrls.setSpeedLimitColors();
                        var data = {
                            deviceid: this.deviceid,
                            color1speed: this.sliderValue[0],
                            color2speed: this.sliderValue[1],
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                me.settingModal = false;
                                me.$Message.success(me.$t('main.success'));
                            } else {
                                me.$Message.error(me.$t('main.error'));
                            }
                        })
                    },
                    onSelectMap: function(item) {
                        this.mapType = item.mapType;
                        this.setMapType(item);
                    },
                    onSwitchTraffic: function(traffic) {
                        var isBMap = this.mapType == 'bMap';
                        if (traffic) {
                            if (isBMap) {
                                this.baiduTrafficLayer.show();
                            } else {
                                this.googleTrafficLayer.show();
                            }
                        } else {
                            if (isBMap) {
                                this.baiduTrafficLayer.hide();
                            } else {
                                this.googleTrafficLayer.hide();
                            }
                        }
                    },
                    startedPlay: function() {
                        var me = this;
                        if (this.isPlaying == false) {
                            if (me.currentTracksLenth != 0) {
                                this.isPlaying = true;
                                this.timer = setInterval(function() {
                                    me.currentMarkerIndex++;
                                    if (me.currentMarkerIndex > me.currentTracksLenth - 1) {
                                        me.currentMarkerIndex = 0;
                                        me.stopPlay();
                                    }
                                    if (me.tabActive == 'table') {
                                        me.srcollToCurruntRow(me.currentMarkerIndex);
                                    }
                                    me.markerMoveing();
                                    if (me.isShowAllLine == 'no') {
                                        // var tracks = me.getTypeRecords();
                                        // var pointList = me.getPointList(tracks);
                                        // me.lineString.setCoordinates(pointList);
                                        me.redrawLines();

                                    }
                                }, me.playSpeedMillisecond);
                            } else {
                                me.$Message.error(isZh ? "没有轨迹" : "No Tracks");
                            }
                        }
                    },
                    stopPlay: function() {
                        clearInterval(this.timer);
                        this.isPlaying = false;
                    },
                    prveSpeed: function() {
                        if (this.currentTracksLenth == 0) return;
                        this.currentMarkerIndex--;
                        if (this.currentMarkerIndex < 0) {
                            this.currentMarkerIndex = this.currentTracksLenth - 1;
                        }
                        if (this.tabActive == 'table') {
                            this.srcollToCurruntRow(this.currentMarkerIndex);
                        }
                        this.markerMoveing();
                        if (this.isShowAllLine == 'no') {
                            this.redrawLines();
                        }
                    },
                    redrawLines: function() {
                        var tracks = this.getTypeRecords();
                        // var pointList = this.getPointList(tracks);
                        // this.lineString.setCoordinates(pointList);
                        this.map.removeLayer(this.lineLayer);
                        this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);
                        this.lineLayer.setZIndex(998);

                        this.drawLines(tracks);
                    },
                    drawLines: function(tracks) {
                        var lastLineColor = -1;
                        var tempPointList = [];
                        for (var i = 0; i < tracks.length; i++) {
                            var nextMarkerIndex = i + 1;
                            var isLastLines = false;
                            var trackPre = tracks[i];
                            var trackPost = tracks[nextMarkerIndex];

                            if (!trackPost) {
                                trackPost = trackPre;
                                isLastLines = true;
                            }

                            if (this.isShowAllLine == 'no' && nextMarkerIndex > this.currentMarkerIndex) {
                                break;
                            }
                            if (this.isShowAllLine == 'no' && nextMarkerIndex == (this.currentMarkerIndex)) {
                                isLastLines = true;
                            }


                            var currentlineColor = this.getLineColorBySpeed(trackPre.speed);


                            if (lastLineColor == -1) {
                                lastLineColor = currentlineColor;
                            }


                            if ((currentlineColor != lastLineColor) || isLastLines) {
                                if (tempPointList.length > 0) {
                                    new maptalks.LineString(
                                        tempPointList, {
                                            symbol: {
                                                'lineColor': {
                                                    'type': 'linear',
                                                    'colorStops': [
                                                        [0.00, lastLineColor],
                                                        [1.00, lastLineColor]
                                                    ]
                                                },
                                                'lineWidth': playbackLineWidth
                                            }
                                        }).addTo(this.lineLayer);
                                    lastLineColor = currentlineColor;
                                    tempPointList = [];
                                }
                            }

                            if (this.mapType == 'bMap') {
                                tempPointList.push(trackPre.bpoint);
                                tempPointList.push(trackPost.bpoint);
                            } else {
                                var track = tracks[i];
                                tempPointList.push(trackPre.gpoint);
                                tempPointList.push(trackPost.gpoint);

                            }



                        }
                    },
                    nextSpeed: function() {
                        if (this.currentTracksLenth == 0) return;
                        this.currentMarkerIndex++;
                        if (this.currentMarkerIndex > this.currentTracksLenth - 1) {
                            this.currentMarkerIndex = 0;
                        }
                        this.markerMoveing();
                        if (this.tabActive == 'table') {
                            this.srcollToCurruntRow(this.currentMarkerIndex);
                        }
                        if (this.isShowAllLine == 'no') {
                            this.redrawLines();
                        }
                    },
                    markerMoveing: function() {
                        var tracks = this.getTypeRecords();
                        var track = tracks[this.currentMarkerIndex];
                        if (track) {
                            var isBMap = this.mapType == 'bMap';
                            var point = isBMap ? track.bpoint : track.gpoint;

                            this.carMarker.setCoordinates(point);

                            this.carMarker.setSymbol(this.getMarkerSymbol('./images/carstate/' + icon + '_green_0.png', track.course, 15));

                            var sContent = this.getInfoWindowContent(track);
                            this.globalInfoWindow.setContent(sContent);
                            // this.carMarker.setInfoWindow({
                            //     'content': sContent,
                            //     'width': 330,
                            //     'autoOpenOn': 'click', //set to null if not to open when clicking on marker
                            //     'autoCloseOn': false, //set to null if not to open when clicking on marker
                            //     'animation': false,
                            //     'autoPan': false,
                            //     'animationDuration': 0,
                            // });

                            if (this.isShowBubble) {
                                this.globalInfoWindow.show(point);
                                // this.carMarker.openInfoWindow();
                            } else {
                                this.globalInfoWindow.hide();
                            }


                            var isOut = this.isOut(point, this.map.getExtent());
                            if (!isOut) {
                                this.map.setCenter(point);
                            }
                        }

                    },
                    isOut: function(point, extent) {
                        return extent.contains(point)
                    },
                    getMarkerSymbol: function(markerFile, markerRotation, markerDy) {
                        return {
                            'markerFile': markerFile,
                            'markerWidth': 30,
                            'markerHeight': 30,
                            'markerRotation': -markerRotation,
                            // 'markerDy': markerDy,
                            // 'markerDx': 0,
                            "markerHorizontalAlignment": "middle",
                            "markerVerticalAlignment": "middle",
                        };
                    },
                    getPrakMarkerSymbol: function(markerFile, markerRotation, markerDy) {
                        return {
                            'markerFile': markerFile,
                            'markerWidth': 30,
                            'markerHeight': 30,
                            'markerRotation': -markerRotation,
                            'markerDy': markerDy,
                            'markerDx': 0,
                            // "markerHorizontalAlignment": "middle",
                            // "markerVerticalAlignment": "middle",
                        };
                    },
                    onClickDate: function(item) {

                        // if (!item.isTheMonth) return;
                        this.date = item.day;

                        var dateStr = item.dateStr;
                        this.startTimeValue = dateStr + " 00:00:00";
                        this.endTimeValue = dateStr + " 23:59:59";
                        this.today = new Date(dateStr);
                        this.recalculateMileage = 0;
                        this.mapMileage = 0;
                        this.confirmMileage = 0;
                        this.queryTracks();
                        var mileage = this.mileageMonthRecord[dateStr];
                        if (mileage != undefined) {
                            this.todayMileage = mileage;
                            // this.totalMileage = mileage;
                        } else {
                            this.todayMileage = '-';
                            this.totalMileage = '-';
                        }

                        if (item.isPrevMonth) {
                            this.prevMonth();
                        } else if (item.isNextMonth) {
                            this.nextMonth();
                        }

                    },
                    prevMonth: function() {
                        this.month--;
                        if (!this.mileageMonthRecord[this.dateStr]) {
                            this.queryReportMileageDetail(new Date(this.year, this.month - 1, 1));
                        }

                    },
                    nextMonth: function() {
                        this.month++;
                        if (!this.mileageMonthRecord[this.dateStr]) {
                            this.queryReportMileageDetail(new Date(this.year, this.month - 1, 1));
                        }
                    },
                    setTheDate: function() {
                        var date = new Date();
                        this.year = date.getFullYear();
                        this.month = date.getMonth() + 1;
                        this.date = date.getDate();
                        this.datesArr = this.getDatesArr();
                    },
                    getTheMonthFirstDayWeek: function() {
                        return new Date(this.year, this.month - 1, 1).getDay();
                    },
                    getTheMonthDays: function() {
                        var year = this.month == 12 ? this.year + 1 : this.year;
                        var month = this.month == 12 ? 1 : this.month;
                        return new Date(new Date(year, month, 1) - 1).getDate();
                    },
                    getPrevMonthLastDate: function() {
                        return new Date(new Date(this.year, this.month - 1, 1) - 1).getDate();
                    },
                    getDatesArr: function() {
                        var datesArr = [];
                        var weekNum = this.getTheMonthFirstDayWeek();
                        var prevMonthDate = this.getPrevMonthLastDate();
                        var prevYearMonth = DateFormat.format(new Date(new Date(this.year, this.month - 2, 1)), 'yyyy-MM');
                        var nextYearMonth = DateFormat.format(new Date(new Date(this.year, this.month, 1)), 'yyyy-MM');
                        var theDates = this.getTheMonthDays();
                        while (weekNum--) {
                            datesArr.unshift({
                                dateStr: prevYearMonth + '-' + (prevMonthDate > 9 ? prevMonthDate : '0' + prevMonthDate),
                                day: prevMonthDate--,
                                isTheMonth: false,
                                isPrevMonth: true,
                                isNextMonth: false,
                                mileage: '-',
                            });
                        }
                        var d = 1;
                        var month = this.month > 9 ? this.month : '0' + this.month;
                        while (theDates--) {
                            var dateStr = this.year + '-' + month + '-' + (d < 10 ? ('0' + d) : d);
                            var mileage = '-';
                            if (this.mileageMonthRecord[dateStr] != undefined) {
                                mileage = this.mileageMonthRecord[dateStr];
                            }
                            datesArr.push({
                                day: d,
                                isTheMonth: true,
                                mileage: mileage,
                                dateStr: dateStr
                            });
                            d++;
                        }
                        var count = 1;
                        while (datesArr.length < 42) {

                            var dateStr = nextYearMonth + '-' + (count < 10 ? ('0' + count) : count);
                            datesArr.push({
                                day: count++,
                                isTheMonth: false,
                                mileage: '-',
                                dateStr: dateStr,
                                isNextMonth: true,
                                isPrevMonth: false,
                            });
                        }
                        return datesArr;
                    },
                    recalMileage: function() {
                        var me = this;
                        var url = myUrls.recalMileage();
                        var statisticsday = DateFormat.format(this.today, 'yyyy-MM-dd');
                        var data = {
                            deviceid: deviceid,
                            statisticsday: statisticsday,
                            offset: DateFormat.getOffset()
                        }
                        this.recalMileageLoading = true;
                        utils.sendAjax(url, data, function(resp) {
                            me.recalMileageLoading = false;
                            if (resp.status == 0) {
                                var distance = Number((resp.totaldistance / 1000).toFixed(2));
                                var mapdistance = Number((resp.mapdistance / 1000).toFixed(2));
                                me.recalculateMileage = Number(distance);
                                me.mapMileage = Number(mapdistance);
                                me.confirmMileage = Number(distance);
                                me.$Message.success(isZh ? "重算成功" : "Recalculation succeeded");
                            } else if (resp.status == 1) {
                                me.$Message.error(isZh ? '待日记录生成之后再编辑' : 'Edit after the daily record is generated');
                            } else {
                                me.$Message.error(isZh ? "重算失败" : "Recalculation failed");
                            }
                        })
                    },
                    editTotalMileage: function() {
                        var me = this;
                        var url = myUrls.resetMileage();
                        var statisticsday = DateFormat.format(this.today, 'yyyy-MM-dd');
                        var mileage = this.confirmMileage;
                        var data = {
                            deviceid: deviceid,
                            statisticsday: statisticsday,
                            offset: DateFormat.getOffset(),
                            totaldistance: Number(mileage) * 1000
                        }
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                if (me.dateStr == statisticsday) {
                                    me.totalMileage = Number(mileage);
                                }
                                me.mileageMonthRecord[statisticsday] = Number(mileage);
                                me.changeDatesArrMileage(statisticsday, mileage)
                                me.$Message.success(isZh ? "设置成功" : "Set successfully");
                            } else if (resp.status == 1) {
                                me.$Message.error(isZh ? '待日记录生成之后再编辑' : 'Edit after the daily record is generated');
                            } else if (resp.status == 2) {
                                me.$Message.error(isZh ? '没有调整权限' : 'No permission');
                            } else {
                                me.$Message.error(isZh ? '设置里程失败' : 'Failed to set mileage');
                            }
                        });
                    },
                    changeDatesArrMileage: function(dateStr, mileage) {

                        for (var i = 0; i < this.datesArr.length; i++) {
                            var item = this.datesArr[i];
                            if (item.dateStr == dateStr) {
                                item.mileage = mileage;
                                break;
                            }
                        }

                        this.datesArr = this.getDatesArr();

                    },
                    onPageChange: function(index) {
                        var me = this;
                        var offset = index * me.pageSize;
                        var start = (index - 1) * me.pageSize;
                        this.currentIndex = index;
                        var tracks = me.getTypeRecords();
                        var splitTrack = tracks.slice(start, offset);
                        splitTrack.forEach(function(item) {
                            item._highlight = false;
                            var address = LocalCacheMgr.getAddress(item.callon, item.callat);
                            item.address = address ? address : (isZh ? '点击一键获取' : 'Click query address');
                        });
                        me.tableData = splitTrack;
                    },
                    initCharts: function() {
                        var me = this;
                        var speed = this.$t('main.speed');;
                        var recorderspeed = isZh ? "行驶记录仪速度" : 'RecorderSpeed';
                        var time = this.$t('main.time');
                        var usoil1 = this.$t('main.oil1');
                        var usoil2 = this.$t('main.oil2');
                        var usoil3 = this.$t('main.oil3');
                        var usoil4 = this.$t('main.oil4');
                        var totalOil = this.$t('main.totalOil');
                        var notRunOil = this.$t('main.notRunOil');
                        var weight = this.$t('main.weight');
                        this.distance = [];
                        this.veo = [];
                        this.recorderspeed = [];
                        this.recvtime = [];
                        this.oil = [];
                        this.notRunOil = [];
                        this.oil1 = [];
                        this.oil2 = [];
                        this.oil3 = [];
                        this.oil4 = [];
                        this.devStates = [];
                        this.weights = [];
                        this.markPointData = [];
                        this.selectedLegend = {
                            [recorderspeed]: false,
                            [totalOil]: isHasOil,
                            [notRunOil]: false,
                            [usoil1]: false,
                            [usoil2]: false,
                            [usoil3]: false,
                            [usoil4]: false,
                            [weight]: false,
                        }
                        this.charts = echarts.init(document.getElementById('charts'));
                        this.charts.setOption(this.getChartsOption(), true);
                        this.charts.getZr().on('click', function(params) {
                            var pointInPixel = [params.offsetX, params.offsetY];
                            if (me.charts.containPixel('grid', pointInPixel)) {
                                var tracks = me.getTypeRecords();
                                if (tracks.length) {
                                    var xIndex = me.charts.convertFromPixel({
                                        seriesIndex: 0
                                    }, [params.offsetX, params.offsetY])[0];

                                    me.currentMarkerIndex = xIndex;
                                    me.srcollToCurruntRow(xIndex);
                                    me.markerMoveing();
                                    if (me.isShowAllLine == 'no') {
                                        me.redrawLines();
                                    }
                                }
                            }
                        });

                        var onresize = utils.debounce(function() {
                            me.charts.resize();
                        }, 500);



                        this.charts.on('legendselectchanged', function(param) {
                            me.selectedLegend = param.selected;
                            me.isShowSpeed = param.selected[speed];
                            me.charts.setOption(me.getChartsOption(), true);
                        })
                        window.onresize = onresize;
                    },
                    getTypeRecords: function() {
                        var tracks = null;
                        if (this.trackType == 'exact') {
                            tracks = this.exactTracks;
                        } else if (this.trackType == 'all') {
                            tracks = this.allTracks;
                        }
                        return tracks;
                    },
                    getChartsOption: function() {
                        var totalOil = this.$t('main.totalOil');
                        var notRunOil = this.$t('main.notRunOil');
                        var speed = this.$t('main.speed');
                        var recorderspeed = isZh ? "行驶记录仪速度" : 'RecorderSpeed';
                        var dis = this.$t('main.mileage');
                        var time = this.$t('main.time');
                        var usoil1 = this.$t('main.oil1');
                        var usoil2 = this.$t('main.oil2');
                        var usoil3 = this.$t('main.oil3');
                        var usoil4 = this.$t('main.oil4');
                        var cotgasus = this.$t('main.oil');
                        var status = this.$t('main.status');
                        var weight = this.$t('main.weight');
                        var reissue = this.$t('main.reissue');
                        var option = {
                            backgroundColor: '#F9F9F9',
                            title: {
                                text: '',
                                x: 'center',
                                textStyle: {
                                    fontSize: 12,
                                    fontWeight: 'bolder',
                                    color: '#333'
                                }
                            },
                            grid: {
                                top: 40,
                                left: 30,
                                right: 55,
                                bottom: 40
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function(v, a) {
                                    var data = vRoot.$t('main.time') + ': ' + v[0].name + '<br/>';
                                    for (i in v) {
                                        var seriesName = v[i].seriesName;
                                        var value = v[i].value;
                                        if (seriesName && seriesName != vRoot.$t('main.time')) {
                                            if (seriesName == weight) {
                                                data += seriesName + ' : ' + value + 'Kg<br/>';
                                            } else if (seriesName == dis) {
                                                data += seriesName + ' : ' + value + 'Km<br/>';
                                            } else if (seriesName == speed || seriesName == recorderspeed) {
                                                data += seriesName + ' : ' + value + 'Km/h<br/>';
                                            } else if (seriesName == totalOil || seriesName == notRunOil || seriesName == usoil1 || seriesName == usoil2 || seriesName == usoil3 || seriesName == usoil4) {
                                                data += seriesName + ' : ' + value + 'L<br/>';
                                            } else if (seriesName == 'red' || seriesName == 'green') {

                                            } else {
                                                data += seriesName + ' : ' + value + '<br/>';
                                            }
                                        }
                                    }
                                    return data;
                                },
                            },
                            legend: {
                                data: [dis, speed, recorderspeed, totalOil, notRunOil, usoil1, usoil2, usoil3, usoil4, weight],
                                selected: this.selectedLegend,
                                x: 'left'
                            },
                            toolbox: {
                                show: false,
                                feature: {
                                    magicType: {
                                        show: true,
                                        type: ['line', 'bar']
                                    },
                                    restore: {
                                        show: true
                                    },
                                    saveAsImage: {
                                        show: true
                                    }
                                },
                                itemSize: 14
                            },
                            dataZoom: [{
                                show: true,
                                realtime: true,
                                start: 0,
                                end: 100,
                                height: 20,
                                backgroundColor: '#EDEDED',
                                fillerColor: 'rgb(54, 72, 96,0.5)',
                                bottom: 0
                            }, {
                                type: "inside",
                                realtime: true,
                                start: 0,
                                end: 100,
                                height: 20,
                                bottom: 0
                            }],
                            xAxis: [{
                                type: 'category',
                                boundaryGap: false,
                                axisLine: {
                                    onZero: false
                                },
                                data: this.recvtime
                            }],
                            yAxis: [{
                                name: speed,
                                type: 'value',
                                nameTextStyle: 10,
                                nameGap: 5,
                            }, {
                                name: dis,
                                type: 'value',
                                nameTextStyle: 10,
                                nameGap: 2,
                                min: this.disMin,
                                axisLabel: {
                                    formatter: '{value} km',
                                },
                                axisTick: {
                                    show: false
                                }
                            }],
                            series: this.getSeriesData()
                        };

                        return option;
                    },
                    getSeriesData: function() {
                        var totalOil = this.$t('main.totalOil');
                        var notRunOil = this.$t('main.notRunOil');
                        var speed = this.$t('main.speed');
                        var recorderspeed = isZh ? "行驶记录仪速度" : 'RecorderSpeed';
                        var dis = this.$t('main.mileage');
                        var time = this.$t('main.time');
                        var usoil1 = this.$t('main.oil1');
                        var usoil2 = this.$t('main.oil2');
                        var usoil3 = this.$t('main.oil3');
                        var usoil4 = this.$t('main.oil4');
                        var cotgasus = this.$t('main.oil');
                        var status = this.$t('main.status');
                        var weight = this.$t('main.weight');
                        var reissue = this.$t('main.reissue');
                        var seriesData = [{
                            name: time,
                            type: 'line',
                            symbol: 'none',
                            yAxisIndex: 1,
                            color: '#F0805A',
                            data: this.recvtime,
                            smooth: true,
                        }, {
                            name: dis,
                            type: 'line',
                            symbol: 'none',
                            yAxisIndex: 1,
                            color: '#3CB371',
                            data: this.distance,
                            smooth: true,
                        }, {
                            name: speed,
                            type: 'line',
                            symbol: 'none',
                            yAxisIndex: 0,
                            color: '#4876FF',
                            data: this.veo,
                            smooth: true,
                        }, {
                            name: recorderspeed,
                            type: 'line',
                            symbol: 'none',
                            yAxisIndex: 0,
                            color: '#710000',
                            data: this.recorderspeed,
                            smooth: true,
                        }, {
                            name: totalOil,
                            type: 'line',
                            symbol: 'none',
                            color: '#C1232B',
                            data: this.oil,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointData
                            }
                        }, {
                            name: notRunOil,
                            type: 'line',
                            symbol: 'none',
                            color: '#EE388E',
                            data: this.notRunOil,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointDataOil99
                            }
                        }, {
                            name: usoil1,
                            type: 'line',
                            symbol: 'none',
                            color: '#8E388E',
                            data: this.oil1,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointDataOil1
                            }
                        }, {
                            name: usoil2,
                            type: 'line',
                            symbol: 'none',
                            color: '#FF4500',
                            data: this.oil2,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointDataOil2
                            }
                        }, {
                            name: usoil3,
                            type: 'line',
                            symbol: 'none',
                            color: '#2177C7',
                            data: this.oil3,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointDataOil3
                            }
                        }, {
                            name: usoil4,
                            type: 'line',
                            symbol: 'none',
                            color: '#B05432',
                            data: this.oil4,
                            smooth: true,
                            markPoint: {
                                symbolSize: 36,
                                symbolKeepAspect: true,
                                data: this.markPointDataOil4
                            }
                        }, {
                            name: weight,
                            type: 'line',
                            symbol: 'none',
                            color: '#000',
                            data: this.weights,
                            smooth: true,
                        }, {
                            name: status,
                            type: 'line',
                            symbol: 'none',
                            color: '#000',
                            data: this.devStates,
                            smooth: true,
                        }, {
                            name: reissue,
                            type: 'line',
                            symbol: 'none',
                            color: '#000',
                            data: this.devReissue,
                            smooth: true,
                        }, {
                            name: 'red',
                            type: 'line',
                            symbol: 'none',
                            // color: 'red',
                            data: this.isShowSpeed ? this.redArr : [],
                            smooth: true,
                            lineStyle: {
                                color: 'red',
                                width: 1,
                                type: 'dashed'
                            },
                        }, {
                            name: 'green',
                            type: 'line',
                            symbol: 'none',
                            // color: 'green',
                            data: this.isShowSpeed ? this.greenArr : [],
                            smooth: true,
                            lineStyle: {
                                color: 'green',
                                width: 1,
                                type: 'dashed'
                            },
                        }]
                        return seriesData;
                    },

                    redrawCharts: function() {
                        var records = this.getTypeRecords(),
                            me = this;
                        var distance = []; //总里程;
                        var recvtime = []; //时间
                        var veo = []; //速度
                        var recorderspeed = []; //速度
                        var oil = [];
                        var notRunOil = [];
                        var oil1 = [];
                        var oil2 = [];
                        var oil3 = [];
                        var oil4 = [];
                        // var markPointData = [];
                        var devStates = [];
                        var devReissue = [];
                        var weights = [];
                        var redArr = [];
                        var greenArr = [];
                        var from = this.sliderValue[0];
                        var to = this.sliderValue[1];
                        this.disMin = 0;
                        var totalDistanceMin = 0;
                        var totalMileage = 0;
                        records.forEach(function(item, index) {
                            if (index == 0) {
                                totalDistanceMin = item.totaldistance;
                            }
                            var totaldistance = Number((item.totaldistance - totalDistanceMin).toFixed(2));
                            oil1.push(item.ad0);
                            oil2.push(item.ad1);
                            oil3.push(item.ad2);
                            oil4.push(item.ad3);
                            devStates.push(item.strstatus);
                            devReissue.push(item.reissue == 0 ? me.$t('main.no') : me.$t('main.yes'));
                            oil.push(item.totalad);
                            notRunOil.push(item.totalnotrunningad);
                            recvtime.push(DateFormat.longToLocalDateTimeStr(item.updatetime));
                            veo.push(Number((item.speed / 1000).toFixed(2)));
                            recorderspeed.push(Number((item.recorderspeed / 1000).toFixed(2)));
                            distance.push(totaldistance);
                            weights.push(item.weight / 10);
                            redArr.push(from);
                            greenArr.push(to);
                            totalMileage = totaldistance;
                        });


                        this.totalMileage = totalMileage;
                        this.distance = distance;
                        this.recvtime = recvtime;
                        this.veo = veo;
                        this.oil = oil;
                        this.notRunOil = notRunOil;
                        this.oil1 = oil1;
                        this.oil2 = oil2;
                        this.oil3 = oil3;
                        this.oil4 = oil4;
                        // this.markPointData = markPointData;
                        this.devStates = devStates;
                        this.devReissue = devReissue;
                        this.recorderspeed = recorderspeed;
                        this.weights = weights;
                        this.redArr = redArr;
                        this.greenArr = greenArr;
                        this.charts.setOption({}, true);
                        this.charts.setOption(this.getChartsOption());


                    },
                    findNearestTracksByTime: function(tracks, needFoundTime) {
                        var nearestTrack = null;
                        if (tracks) {
                            var detalTime = 24 * 3600 * 1000;
                            for (var i = 0; i < tracks.length; ++i) {
                                var tempTrack = tracks[i];
                                var trackUpdateTime = tempTrack.updatetime;
                                var tempDetal = trackUpdateTime - needFoundTime;
                                var absTempDetal = Math.abs(tempDetal);
                                if (absTempDetal < detalTime) {
                                    if (tempDetal < 0) {
                                        detalTime = absTempDetal;
                                        nearestTrack = tempTrack;
                                        nearestTrack.index = i;
                                    } else if (tempDetal == 0) {
                                        nearestTrack = tempTrack;
                                        nearestTrack.index = i;
                                        break;
                                    } else if (tempDetal > 0) {
                                        nearestTrack = tempTrack;
                                        nearestTrack.index = i;
                                        break;
                                    }
                                }
                            }
                        }

                        return nearestTrack;
                    },
                    calMarkPoint: function(tracks, oilDeviceRecords) {
                        var markPoints = [];
                        if (oilDeviceRecords && oilDeviceRecords.length > 0) {
                            var oilRecords = oilDeviceRecords[0].records;
                            if (oilRecords && oilRecords.length > 0) {
                                for (var i = 0; i < oilRecords.length; ++i) {
                                    var oilRecord = oilRecords[i];
                                    var oilEndTime = oilRecord.endtime;
                                    var nearestTrack = this.findNearestTracksByTime(tracks, oilEndTime);
                                    if (nearestTrack) {
                                        var oil = nearestTrack.totalad;
                                        var difference = (oilRecord.eoil - oilRecord.soil);
                                        var color = '';
                                        if (difference > 0) {
                                            color = 'green';
                                        } else {
                                            color = 'red';
                                        }
                                        var markPoint = {
                                            coord: [nearestTrack.index, oil], // 其中 5 表示 xAxis.data[5]，即 '33' 这个元素。
                                            value: Math.abs(difference).toFixed(0),
                                            itemStyle: {
                                                color: color
                                            },
                                            label: {
                                                fontSize: 8,
                                            }
                                        };
                                        markPoints.push(markPoint);
                                    }
                                }
                            }
                        }
                        return markPoints;
                    },
                    getMonthDays: function(date) {
                        var year = date.getFullYear();
                        var month = date.getMonth();
                        var d = new Date(year, month, 0);
                        return d.getDate();
                    },
                    queryReportMileageDetail: function(date) {
                        var me = this;
                        var currentDateStr = DateFormat.format(date, "yyyy-MM");
                        var url = myUrls.reportMileageDetail();
                        var theDates = this.getTheMonthDays();
                        var startday = currentDateStr + '-01';
                        var endDay = currentDateStr + '-' + theDates;

                        var currentDay = DateFormat.format(new Date(), "yyyy-MM-dd");
                        if (currentDay.localeCompare(startday) == -1) {
                            return;
                        };
                        if (currentDay.localeCompare(endDay) == -1) {
                            endDay = currentDay;
                        };
                        var data = {
                            startday: startday,
                            endday: endDay,
                            offset: timeDifference,
                            deviceid: deviceid,
                        };
                        utils.sendAjax(url, data, function(resp) {
                            var records = resp.records;
                            if (records) {
                                records.forEach(function(item) {
                                    if (item) {
                                        if (item.totaldistance == 0) {
                                            me.mileageMonthRecord[item.statisticsday] = '0.0';
                                        } else {
                                            if (0 < item.totaldistance && item.totaldistance < 10) {
                                                item.totaldistance = 10;
                                            }
                                            me.mileageMonthRecord[item.statisticsday] = (item.totaldistance / 1000).toFixed(2);
                                        }

                                        if (item.statisticsday == currentDay) {
                                            me.todayMileage = Number(me.mileageMonthRecord[item.statisticsday]);
                                            // me.totalMileage = me.todayMileage;
                                        }
                                    }
                                })
                            }
                            me.setDeviceMileage();
                        });
                    },
                    setDeviceMileage: function() {
                        var datesArr = this.datesArr;
                        for (var i = 0; i < datesArr.length; i++) {
                            var item = datesArr[i];
                            if (item.isTheMonth) {
                                var day = item.day;
                                var key = item.dateStr;
                                var mileage = this.mileageMonthRecord[key];
                                if (mileage) {
                                    item.mileage = mileage;
                                }

                            }
                        }
                    },
                    setTableData: function() {
                        var record = this.getTypeRecords();
                        record.forEach(function(item, index) {
                            item.idx = index + 1;
                        });
                        var tempTableData = record.slice(0, this.pageSize);
                        this.tableData = tempTableData;
                        this.total = record.length;
                        this.currentIndex = 1;
                    },
                    queryTracks: function() {


                        if (this.isPlaying) {
                            this.stopPlay();
                        };


                        var startTimeValue = '';
                        var endTimeValue = '';
                        if (this.startTimeValue instanceof Date) {
                            startTimeValue = DateFormat.format(this.startTimeValue, 'yyyy-MM-dd HH:mm:ss')
                        } else {
                            startTimeValue = this.startTimeValue;
                        }
                        if (this.endTimeValue instanceof Date) {
                            endTimeValue = DateFormat.format(this.endTimeValue, 'yyyy-MM-dd HH:mm:ss')
                        } else {
                            endTimeValue = this.endTimeValue;
                        }


                        this.loading = true;
                        var me = this;
                        var url = myUrls.queryTracksProto();
                        var data = {
                            deviceid: this.deviceid,
                            lbs: 1,
                            // interval: Number(this.interval) * 60,
                            timezone: DateFormat.getOffset(),
                            begintime: startTimeValue,
                            endtime: endTimeValue,
                        };

                        var xhr = null;
                        try {
                            xhr = new XMLHttpRequest();
                        } catch (e) {
                            xhr = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        //2.调用open方法（true----异步）
                        xhr.open("post", url, true);
                        xhr.responseType = "arraybuffer";
                        //3.发送数据
                        //xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                        xhr.send(JSON.stringify(data));

                        //4.请求状态改变事件
                        xhr.onreadystatechange = function() {
                            if (xhr.readyState == 4) {
                                if (xhr.status == 200) {
                                    var responseArray = new Uint8Array(this.response)
                                    var protobufRoot = protobuf.Root.fromJSON(respQueryDeviceTrackProto);
                                    var respDeviceLastPositionProto = protobufRoot.lookupType("proto.RespQueryDeviceTrackProto");
                                    var resp = respDeviceLastPositionProto.decode(responseArray);
                                    if (resp.status == 0) {

                                        me.markPointData = [];
                                        me.markPointDataOil1 = [];
                                        me.markPointDataOil2 = [];
                                        me.markPointDataOil3 = [];
                                        me.markPointDataOil4 = [];
                                        me.markPointDataOil99 = [];
                                        var records = resp.records;

                                        me.filtertracks(records ? records : []);

                                        if (isHasOil) {
                                            me.queryAddOilStatus();
                                        } else {
                                            me.redrawCharts();
                                        }

                                        me.setTableData();
                                        setTimeout(function() {
                                            me.getAllNoLoadingTracksAddress(false);
                                        }, 300)
                                        if (me.getTypeRecords().length > 0) {
                                            me.initMapView();
                                        } else {
                                            me.$Message.error(isZh ? "没有轨迹" : "No Tracks");
                                            me.removeAllLayer();
                                            me.totalMileage = '-';
                                        }

                                    } else if (resp.status > 9000) {
                                        me.$Message.error(me.$t("monitor.reLogin"))
                                        localStorage.setItem('token', "");
                                        setTimeout(function() {
                                            window.location.href = 'index.html'
                                        }, 2000)
                                    }

                                }
                            }
                            me.loading = false;
                        }


                        // utils.sendAjax(myUrls.queryTracks(), data, function(resp) {

                        //     if (resp.status == 0) {

                        //         var records = resp.records;
                        //         // if (records != null) {
                        //         //     records = records.splice(0, 4);
                        //         //     records[0].speed = 12 * 1000;
                        //         //     records[1].speed = 30 * 1000;
                        //         //     records[2].speed = 35 * 1000;
                        //         //     records[3].speed = 15 * 1000;
                        //         // }
                        //         me.markPointData = [];
                        //         me.markPointDataOil1 = [];
                        //         me.markPointDataOil2 = [];
                        //         me.markPointDataOil3 = [];
                        //         me.markPointDataOil4 = [];
                        //         me.markPointDataOil99 = [];
                        //         me.filtertracks(records ? records : []);

                        //         if (isHasOil) {
                        //             me.queryAddOilStatus();
                        //         } else {
                        //             me.redrawCharts();
                        //         }

                        //         me.setTableData();
                        //         setTimeout(function() {
                        //             me.getAllNoLoadingTracksAddress(false);
                        //         }, 300)
                        //         if (me.getTypeRecords().length > 0) {
                        //             me.initMapView();
                        //         } else {
                        //             me.$Message.error(isZh ? "没有轨迹" : "No Tracks");
                        //             me.removeAllLayer();
                        //             me.totalMileage = '-';
                        //         }
                        //     }
                        //     me.loading = false;
                        // }, function() {
                        //     me.loading = false;
                        // });
                    },
                    setParkingMarkers: function(tracks) {


                        var startTimeValue = '';
                        var endTimeValue = '';
                        if (this.startTimeValue instanceof Date) {
                            startTimeValue = DateFormat.format(this.startTimeValue, 'yyyy-MM-dd HH:mm:ss')
                        } else {
                            startTimeValue = this.startTimeValue;
                        }
                        if (this.endTimeValue instanceof Date) {
                            endTimeValue = DateFormat.format(this.endTimeValue, 'yyyy-MM-dd HH:mm:ss')
                        } else {
                            endTimeValue = this.endTimeValue;
                        }


                        var me = this;
                        var url = myUrls.reportParkDetailbyTime();
                        var data = {
                            deviceid: this.deviceid,
                            interval: Number(this.interval),
                            timezone: DateFormat.getOffset(),
                            begintime: startTimeValue,
                            endtime: endTimeValue,
                        };

                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                var rarkingMarkers = [];
                                var parkList = [];
                                var records = resp.records;

                                if (records) {
                                    records.forEach(function(item, index) {

                                        var rarkingTime = item.endtime - item.starttime;
                                        var callon = item.callon;
                                        var callat = item.callat;
                                        var g_lon_lat = wgs84togcj02(callon, callat);
                                        item.gpoint = {
                                            y: g_lon_lat[1],
                                            x: g_lon_lat[0]
                                        };

                                        var lng_lat = wgs84tobd09(callon, callat);
                                        item.bpoint = {
                                            y: lng_lat[1],
                                            x: lng_lat[0]
                                        };

                                        var parkPoint = {
                                            index: index + 1,
                                            starttime: DateFormat.longToLocalDateTimeStr(item.starttime).split(" ")[1],
                                            endtime: DateFormat.longToLocalDateTimeStr(item.endtime).split(" ")[1],
                                            duration: utils.timeStamp(item.endtime - item.starttime),
                                            item: item,
                                            callon: callon,
                                            callat: callat,
                                            address: item.address
                                        };

                                        parkList.push(parkPoint);


                                        marker = me.createMarker(item, false, './images/p/p_' + (index + 1) + '.png', 0);
                                        me.isShowPark ? marker.show() : marker.hide();
                                        marker.item = item;
                                        marker.index = index + 1;

                                        marker.on('click', function() {
                                            var sContent = me.getInfoWindowContent(this.item);
                                            this.setInfoWindow({
                                                'content': sContent,
                                                'width': 330,
                                                'autoOpenOn': 'click', //set to null if not to open when clicking on marker
                                                'autoCloseOn': false, //set to null if not to open when clicking on marker
                                                'animation': false,
                                                'autoPan': false,
                                                'animationDuration': 0,
                                            });
                                            this.openInfoWindow();
                                            me.currentMarkerIndex = me.getCurruntTrackIndex(this.item.updatetime);
                                        }, false);
                                        rarkingMarkers.push(marker);

                                    });
                                }
                                me.parkList = parkList;
                                // 设置停留点marker
                                me.parkingMarker = rarkingMarkers;
                                me.parkingVectorLayer = new maptalks.VectorLayer('parkingMarkers', rarkingMarkers);
                                me.parkingVectorLayer.setZIndex(999)
                                me.parkingVectorLayer.addTo(me.map);
                            }
                        });
                    },
                    getCurruntTrackIndex: function(toFindUpdateTime) {

                        var usingTrack = this.getTypeRecords();
                        var curruntTrackIndex = 0;
                        var preUpdateTime = 0;
                        var postUpdateTime = 0;
                        for (var i = 0; i < usingTrack.length; i++) {
                            var track = usingTrack[i];
                            var postUpdateTime = track['updatetime'];
                            if (toFindUpdateTime == postUpdateTime) {
                                curruntTrackIndex = i;
                                break;
                            } else if (toFindUpdateTime < postUpdateTime) {
                                if (i > 0) {
                                    var preTrack = usingTrack[i - 1];
                                    preUpdateTime = preTrack['updatetime'];
                                    var preInterval = toFindUpdateTime - preUpdateTime;
                                    var postInterval = postUpdateTime - toFindUpdateTime;
                                    if (preInterval > postInterval) {
                                        curruntTrackIndex = i;
                                    } else {
                                        curruntTrackIndex = i - 1;
                                    }
                                    break;
                                } else {
                                    curruntTrackIndex = i;
                                    break;
                                }
                            }
                        }

                        return curruntTrackIndex;
                    },
                    initMapView: function() {

                        // 清除之前的图层
                        if (this.markerLayer !== null) {
                            this.map.removeLayer(this.markerLayer);
                        }


                        // 清除之前的图层
                        if (this.lineLayer !== null) {
                            this.map.removeLayer(this.lineLayer);
                        }

                        // 清除之前的停留点
                        if (this.parkingVectorLayer !== null) {
                            this.map.removeLayer(this.parkingVectorLayer);
                        }

                        if (this.globalInfoWindow) {
                            this.globalInfoWindow.hide();
                        }

                        if (this.carMarker) {
                            this.carMarker.closeInfoWindow()
                        }

                        this.map.removeLayer('parkingMarkers');

                        // 得到当前类型轨迹
                        var tracks = this.getTypeRecords();

                        // 初始化当前marker下标
                        this.currentMarkerIndex = 0;
                        this.currentTracksLenth = tracks.length;

                        // 创建地图上所有marker    
                        this.carMarker = this.createMarker(tracks[this.currentMarkerIndex], true, './images/carstate/' + icon + '_green_0.png', 15);
                        this.startMarker = this.createMarker(tracks[0], false, './images/map/marker_qidian.png', 0);
                        this.endMarker = this.createMarker(tracks[tracks.length - 1], false, './images/map/marker_zhongdian.png', 0);
                        this.carMarker.setZIndex(5555);

                        // 创建marker图层并添加到地图    
                        this.markerLayer = new maptalks.VectorLayer('marker', [this.startMarker, this.endMarker, this.carMarker]);
                        this.markerLayer.setZIndex(999)
                        this.markerLayer.addTo(this.map);

                        // 创建line图层并添加到地图  
                        this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);
                        this.lineLayer.setZIndex(998);

                        //得到停留的Markers 并添加到地图   
                        this.parkingMarker = this.setParkingMarkers(tracks);
                        // this.parkingVectorLayer = new maptalks.VectorLayer('parkingMarkers', this.parkingMarker);
                        // this.parkingVectorLayer.setZIndex(999)
                        // this.parkingVectorLayer.addTo(this.map);


                        // var sContent = this.getInfoWindowContent(tracks[0]);
                        // this.globalInfoWindow.setContent(sContent);
                        // this.carMarker.setInfoWindow({
                        //     'content': sContent,
                        //     'width': 330,
                        //     'autoOpenOn': 'click', //set to null if not to open when clicking on marker
                        //     'autoCloseOn': false, //set to null if not to open when clicking on marker
                        //     'animation': false,
                        //     'autoPan': false,
                        //     'animationDuration': 0,
                        // });

                        if (this.isShowBubble) {
                            // this.carMarker.openInfoWindow();
                            // this.globalInfoWindow.show(this.carMarker.getCoordinates());
                        } else {
                            this.globalInfoWindow.hide();
                            this.carMarker.closeInfoWindow()
                        }

                        this.drawLines(tracks);

                        var pointList = this.getPointList(tracks);

                        // this.lineString.setCoordinates(pointList);

                        // this.totalMileage = Number(((tracks[tracks.length - 1].totaldistance - tracks[0].totaldistance)).toFixed(3));



                        this.fitExtent(pointList);


                    },
                    getLineColorBySpeed: function(speed) {
                        var from = this.sliderValue[0];
                        var to = this.sliderValue[1];

                        var lineColor = "black";
                        if (speed < from * 1000) {

                            lineColor = "red";
                        } else if (speed > to * 1000) {
                            lineColor = "#960BA3";
                        } else {
                            lineColor = "green";
                        }
                        return lineColor;
                    },
                    copyToClipboard: function() {
                        var text = devicename + ' - ' + deviceid;
                        var textArea = document.createElement("textarea");
                        textArea.style.position = 'fixed';
                        textArea.style.top = '0';
                        textArea.style.left = '0';
                        textArea.style.width = '2em';
                        textArea.style.height = '2em';
                        textArea.style.padding = '0';
                        textArea.style.border = 'none';
                        textArea.style.outline = 'none';
                        textArea.style.boxShadow = 'none';
                        textArea.style.zIndex = -99;
                        textArea.style.background = 'transparent';

                        textArea.value = text;
                        document.body.appendChild(textArea);
                        textArea.select();

                        try {
                            var successful = document.execCommand('copy');
                            if (isZh) {
                                var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';
                            } else {
                                var msg = successful ? 'Successfully copied to the clipboard' : 'This browser does not support Click to copy to the clipboard';
                            }
                            new Vue().$Message.success(msg);
                        } catch (err) {
                            new Vue().$Message.error(isZh ? '该浏览器不支持点击复制到剪贴板' : 'This browser does not support Click to copy to the clipboard');
                        }
                        setTimeout(function() {
                            document.body.removeChild(textArea);
                        }, 2000)
                    },
                    fitExtent: function(pointList) {
                        if (pointList.length > 1) {
                            var polygon = new maptalks.Polygon(pointList);
                            this.map.fitExtent(polygon.getExtent(), 0);
                            polygon = null;
                        } else {
                            var point = pointList[0];
                            if (point) {
                                this.map.setCenter(point);
                            }
                        }
                    },
                    getPointList: function(tracks) {
                        var pointList = [];
                        if (this.mapType == 'bMap') {
                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];
                                pointList.push(track.bpoint);
                                if (this.isShowAllLine == 'no' && this.currentMarkerIndex == i) {

                                    break;
                                }
                            }
                        } else {
                            for (var i = 0; i < tracks.length; i++) {
                                var track = tracks[i];
                                pointList.push(track.gpoint);
                                if (this.isShowAllLine == 'no' && this.currentMarkerIndex == i) {
                                    break;
                                }
                            }
                        }
                        return pointList;
                    },
                    removeAllLayer: function() {
                        if (this.markerLayer !== null) {
                            this.map.removeLayer(this.markerLayer);
                            this.markerLayer = null;
                        }
                        // if (this.lineString !== null) {
                        //     this.lineString.setCoordinates([]);
                        // }
                        if (this.lineLayer !== null) {
                            // this.markerLayer.clear();
                            this.map.removeLayer(this.lineLayer);
                            this.lineLayer = null;
                        }
                        // 清除之前的停留点
                        if (this.parkingVectorLayer !== null) {
                            this.map.removeLayer(this.parkingVectorLayer);
                            this.parkingVectorLayer = null;
                        }

                        this.currentMarkerIndex = 0;
                        this.currentTracksLenth = 0;
                    },
                    initMap: function() {
                        var me = this;

                        me.lastMapType = this.mapType;
                        this.parkingMarker = [];
                        this.map = new maptalks.Map('map', {
                            centerCross: true,
                            center: [106, 36.11],
                            zoom: 5,
                            minZoom: 4,
                            maxZoom: 20,
                            control: false,
                            scaleControl: false,
                            dragRotate: false,
                            dragPitch: false,
                        });

                        this.setMapType({
                            mapType: this.mapType,
                            traffic: false,
                            xiansu: false,
                            satelliteMap: false
                        });


                        if (!this.globalInfoWindow) {
                            var options = {
                                'content': "<div></div>",
                                'width': 320,
                                'autoOpenOn': null,
                                'autoCloseOn': false,
                                'animation': false,
                                'autoPan': false,
                                'animationDuration': 0,
                                // 'dx': this.isShowLabel ? -5 : 0,
                                "dy": -15,
                            };
                            this.globalInfoWindow = new maptalks.ui.InfoWindow(options);
                            this.globalInfoWindow.addTo(this.map);
                        }


                        // this.lineLayer = new maptalks.VectorLayer('line').addTo(this.map);
                        // this.lineLayer.setZIndex(998);
                        // this.lineString = new maptalks.LineString(
                        //     [], {
                        //         symbol: {
                        //             'lineColor': {
                        //                 'type': 'linear',
                        //                 'colorStops': [
                        //                     [0.00, 'red'],
                        //                     [1.00, 'red']
                        //                 ]
                        //             },
                        //             'lineWidth': 4
                        //         }
                        //     }).addTo(this.lineLayer);


                        this.fenceLayer2 = new maptalks.VectorLayer('fenceLayer2').addTo(this.map);
                        // this.fenceLayer2.setZIndex(1);

                        var customPosition = new maptalks.control.Zoom({
                            'position': {
                                'bottom': '15',
                                'right': '15'
                            },
                            'slider': false,
                            'zoomLevel': false
                        });
                        this.map.addControl(customPosition);

                        this.addDistanceTool();
                    },
                    setMapType: function(mapInfo) {
                        this.map.removeLayer('baiduText');
                        this.map.removeLayer('aliText');
                        var me = this;
                        var newMapType = mapInfo.mapType;
                        var satelliteMap = mapInfo.satelliteMap;

                        var traffic = mapInfo.traffic;
                        if (newMapType == 'bMap') {
                            me.map.setSpatialReference({
                                projection: 'baidu'
                            });
                            var baseOption = satelliteMap ? baiduSatelliteBaseOption : baiduNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('baiduText', baiduTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gMap') {
                            var baseOption = satelliteMap ? googleSatelliteBaseOption : googleNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        } else if (newMapType == 'aMap') {
                            var baseOption = satelliteMap ? aliSatelliteBaseOption : aliNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                            if (satelliteMap) {
                                var textlayer = new maptalks.TileLayer('aliText', aliTextBaseOption)
                                me.map.addLayer(textlayer);
                            }

                        } else if (newMapType == 'gChinaMap') {
                            var baseOption = satelliteMap ? googleChinaSatelliteBaseOption : googleChinaNormaBaseOption;
                            var layer = new maptalks.TileLayer('base', baseOption)
                            me.map.setSpatialReference({})
                            me.map.setBaseLayer(layer);
                        }

                        me.addTrafficLayer(traffic);
                    },
                    srcollToCurruntRow: function(xIndex) {
                        var me = this;
                        var tracks = this.getTypeRecords();
                        var currentIndex = Math.ceil(xIndex / 10);
                        var rowIndex = (xIndex) % 10;
                        // if (rowIndex == 0) {
                        //     rowIndex = 9;
                        // } else {
                        //     rowIndex = rowIndex - 1;
                        // }
                        me.onPageChange(currentIndex);
                        me.currentIndex = currentIndex;

                        me.tableData.forEach(function(item, index) {
                            if (rowIndex == index) {
                                item._highlight = true;
                            } else {
                                item._highlight = false;
                            }
                        });

                        // me.$refs.table.$refs.tbody.clickCurrentRow(rowIndex);
                        $('#track-table div.ivu-table-body').animate({
                            scrollTop: (rowIndex * 25) + 'px'
                        }, 100);

                    },
                    addTrafficLayer: function(traffic) {

                        if (this.baiduTrafficLayer == null) {
                            this.baiduTrafficLayer = new maptalks.TileLayer("baidutraffic", {

                                urlTemplate: function(x, y, z) {
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return baiduTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.baiduTrafficLayer);
                            this.baiduTrafficLayer.hide();
                        }

                        if (this.googleTrafficLayer == null) {
                            this.googleTrafficLayer = new maptalks.TileLayer("googletraffic", {
                                urlTemplate: function(x, y, z) {

                                    y = Math.pow(2, z) - 1 - y;
                                    var domain = '';
                                    if (this.options && this.options['subdomains']) {
                                        var subdomains = this.options['subdomains'];
                                        if (isArrayHasData(subdomains)) {
                                            var length = subdomains.length;
                                            var s = (x + y) % length;
                                            if (s < 0) {
                                                s = 0;
                                            }
                                            domain = subdomains[s];
                                        }
                                    }
                                    var data = {
                                        'x': x,
                                        'y': y,
                                        'z': z,
                                        'domain': domain,
                                        'time': Date.now()
                                    };
                                    var URL_PATTERN = /\{ *([\w_]+) *\}/g;
                                    return googleTrafficUrlTemplate.replace(URL_PATTERN, function(str, key) {
                                        var value = data[key];

                                        if (value === undefined) {
                                            throw new Error('No value provided for variable ' + str);

                                        } else if (typeof value === 'function') {
                                            value = value(data);
                                        }
                                        return value;
                                    });
                                }
                            });
                            this.map.addLayer(this.googleTrafficLayer);
                            this.googleTrafficLayer.hide();
                        }

                        this.onSwitchTraffic(traffic);

                    },
                    editOilRecord: function() {
                        var me = this;
                        var url = myUrls.editOilRecord();
                        var data = {
                            oilrecordid: editObjectRow.oilrecordid,
                            marker: this.marker,
                            deviceid: editObjectRow.deviceid,
                            oilindex: editObjectRow.oilindex
                        };
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status == 0) {
                                me.$Message.success(isZh ? '编辑成功' : 'Edited successfully');
                                editObjectRow.marker = data.marker;
                                me.markerModal = false;
                            } else if (resp.status == 1) {
                                me.$Message.error(isZh ? '正在加油或者漏油中，请稍后备注' : 'Adding or leaking, please marker later');
                            }
                        });
                    },
                    createMarker(track, isRotate, markerFile, markerRotation) {

                        var isBMap = this.mapType == 'bMap';
                        var gpoint = track.gpoint;
                        var bpoint = track.bpoint;

                        var pointArr = isBMap ? [bpoint.x, bpoint.y] : [gpoint.x, gpoint.y];

                        return new maptalks.Marker(
                            pointArr, {
                                symbol: isRotate ? this.getMarkerSymbol(markerFile, track.course, markerRotation) : this.getPrakMarkerSymbol(markerFile, 0, markerRotation),
                            }
                        );
                    },
                    exportData: function() {
                        var me = this;
                        var records = this.getTypeRecords();
                        // me.getAllNoLoadingTracksAddress(false);
                        if (records.length == 0) {
                            return;
                        };
                        var isQueryAddress = records.some(function(item) {
                            return item.address == null || item.address == "点击一键获取" || item.address == 'Click query address';
                        });


                        var data = [
                            [
                                isZh ? '序号' : 'Index',
                                isZh ? '时间' : 'Date',
                                isZh ? '定位类型' : 'Got',
                                isZh ? '速度' : 'Speed',
                                isZh ? '记录仪速度' : 'Rec Speed',
                                isZh ? '里程(Km)' : 'Mileage(Km)',
                                isZh ? '经度' : 'Lon',
                                isZh ? '纬度' : 'Lat',
                                isZh ? '方向' : 'direction',
                                isZh ? '状态' : 'Status',
                                this.$t('main.totalOil') + '(L)',
                                this.$t('main.notRunOil') + '(L)',
                                this.$t('main.oil1') + '(L)',
                                this.$t('main.oil2') + '(L)',
                                this.$t('main.oil3') + '(L)',
                                this.$t('main.oil4') + '(L)',
                                isZh ? '地址' : 'Address',
                            ]
                        ]

                        if (isQueryAddress) {
                            this.getAllNoLoadingTracksAddress(true, function() {

                                records.forEach(function(track) {
                                    var itemArr = [];
                                    itemArr.push(track.idx);
                                    itemArr.push(track.updatetimeStr);
                                    itemArr.push(track.gotsrcStr);
                                    itemArr.push(track.speedStr);
                                    itemArr.push(track.recorderspeedStr);
                                    itemArr.push(track.totaldistance);
                                    itemArr.push(track.callon);
                                    itemArr.push(track.callat);
                                    itemArr.push(utils.getCarDirection(track.course));
                                    itemArr.push(track.strstatus);
                                    itemArr.push(track.totalad);
                                    itemArr.push(track.totalnotrunningad);
                                    itemArr.push(track.ad0);
                                    itemArr.push(track.ad1);
                                    itemArr.push(track.ad2);
                                    itemArr.push(track.ad3);
                                    itemArr.push(track.address);
                                    data.push(itemArr);
                                });

                                var options = {
                                    title: (isZh ? '轨迹 - ' : 'Tracks - ') + this.deviceid,
                                    data: data,
                                }
                                new XlsxCls(options).exportExcel();

                            })
                        } else {

                            records.forEach(function(track) {
                                var itemArr = [];
                                itemArr.push(track.idx);
                                itemArr.push(track.updatetimeStr);
                                itemArr.push(track.gotsrcStr);
                                itemArr.push(track.speedStr);
                                itemArr.push(track.recorderspeedStr);
                                itemArr.push(track.totaldistance);
                                itemArr.push(track.callon);
                                itemArr.push(track.callat);
                                itemArr.push(track.direction);
                                itemArr.push(track.strstatus);
                                itemArr.push(track.totalad);
                                itemArr.push(track.totalnotrunningad);
                                itemArr.push(track.ad0);
                                itemArr.push(track.ad1);
                                itemArr.push(track.ad2);
                                itemArr.push(track.ad3);
                                itemArr.push(track.address);
                                data.push(itemArr);
                            });

                            var options = {
                                title: (isZh ? '轨迹 - ' : 'Tracks - ') + this.deviceid,
                                data: data,
                            }
                            new XlsxCls(options).exportExcel();

                        }

                    },

                    queryAddOilStatus: function() {
                        var me = this;
                        // me.markerOilTableModal = true;
                        var startTimeValue = '';
                        var endTimeValue = '';
                        if (this.startTimeValue instanceof Date) {
                            startTimeValue = DateFormat.format(this.startTimeValue, 'yyyy-MM-dd')
                        } else {
                            startTimeValue = this.startTimeValue;
                        }
                        if (this.endTimeValue instanceof Date) {
                            endTimeValue = DateFormat.format(this.endTimeValue, 'yyyy-MM-dd')
                        } else {
                            endTimeValue = this.endTimeValue;
                        }



                        var data = {
                            startday: startTimeValue,
                            endday: endTimeValue,
                            offset: timeDifference,
                            devices: [deviceid],
                            oilstate: 99,
                            oilindex: 0
                        };
                        utils.sendAjax(myUrls.reportOilRecord(), data, function(resp) {
                            self.loading = false;
                            if (resp.status == 0) {
                                if (resp.records) {
                                    var oilArr = [];
                                    var increaseOil = 0;
                                    var reduceOil = 0;
                                    resp.records.forEach(function(item) {
                                        var index = 1;
                                        item.records.forEach(function(record) {
                                            var oilstate = record.oilstate;
                                            if (oilstate == -1 || oilstate == 1) {
                                                var oilStatus = '';
                                                record.eoil = record.eoil / 100;
                                                record.soil = record.soil / 100;
                                                var oil = Math.abs(record.eoil - record.soil);
                                                switch (oilstate) {
                                                    case -1:
                                                        reduceOil += oil;
                                                        oilStatus = isZh ? '漏油' : 'Oil leakage';
                                                        break;
                                                    case 1:
                                                        increaseOil += oil
                                                        oilStatus = isZh ? '加油' : 'Add Oil';
                                                        break;
                                                }
                                                oilArr.push({
                                                    index: index,
                                                    oilindex: record.oilindex,
                                                    oilindexStr: record.oilindex == 0 ? (isZh ? '全部' : 'All') : record.oilindex,
                                                    oilrecordid: record.oilrecordid,
                                                    oilVolume: oil.toFixed(2),
                                                    soil: record.soil.toFixed(2),
                                                    eoil: record.eoil.toFixed(2),
                                                    begintimeStr: DateFormat.longToLocalDateTimeStr(record.begintime),
                                                    endtimeStr: DateFormat.longToLocalDateTimeStr(record.endtime),
                                                    marker: record.marker,
                                                    oilStatus: oilStatus
                                                        //   oilindex  oilStatus oilVolume soil eoil begintimeStr endtimeStr marker
                                                })
                                                index++;
                                            }

                                        });
                                    });

                                    me.oilTable = oilArr;
                                    var variationOil = (increaseOil + reduceOil).toFixed(2);
                                    if (isZh) {
                                        me.statisticalOil = '变化量 : ' + variationOil + 'L , 总加油量 : ' + increaseOil.toFixed(2) + 'L , ' + '总漏油量 : ' + reduceOil.toFixed(2) + 'L ';
                                    } else {
                                        me.statisticalOil = 'Variation : ' + variationOil + 'L , Total fuel consumption : ' + increaseOil.toFixed(2) + 'L , ' + 'Total oil leakage : ' + reduceOil.toFixed(2) + 'L';
                                    }
                                    var records = me.getTypeRecords();
                                    var oilRecords = resp.records[0].records;
                                    var markPoints = me.calMarkPoint(records, oilRecords);
                                    me.markPointData = utils.calMarkPoint(records, oilRecords, 0);
                                    me.markPointDataOil1 = utils.calMarkPoint(records, oilRecords, 1);
                                    me.markPointDataOil2 = utils.calMarkPoint(records, oilRecords, 2);
                                    me.markPointDataOil3 = utils.calMarkPoint(records, oilRecords, 3);
                                    me.markPointDataOil4 = utils.calMarkPoint(records, oilRecords, 4);
                                    me.markPointDataOil99 = utils.calMarkPoint(records, oilRecords, 99);

                                } else {
                                    me.$Message.error(self.$t("reportForm.noRecord"));
                                }
                                // me.charts.setOption({}, true);
                                // me.charts.setOption(me.getChartsOption());
                                me.redrawCharts();
                            } else {
                                me.$Message.error(resp.cause);
                            }
                        })
                    },
                    filtertracks: function(records) {
                        if (records) {
                            records.sort((a, b) => {                
                                return a.updatetime - b.updatetime;              
                            });
                        }
                        var exactTracks = [];
                        var allTracks = [];
                        for (var i = 0; i < records.length; i++) {
                            var item = records[i];
                            var track = {
                                ad0: item.ad0,
                                ad1: item.ad1,
                                ad2: item.ad2,
                                ad3: item.ad3,
                                address: item.address,
                                altitude: item.altitude,
                                arrivedtime: item.arrivedtime,
                                callat: item.callat,
                                callon: item.callon,
                                course: item.course,
                                endtime: item.endtime,
                                gotsrc: item.gotsrc,
                                gpsvalidnum: item.gpsvalidnum,
                                reportmode: item.reportmode,
                                rxlevel: item.rxlevel,
                                speed: item.speed,
                                srcad0: item.srcad0,
                                srcad1: item.srcad1,
                                srcad2: item.srcad2,
                                srcad3: item.srcad3,
                                starttime: item.starttime,
                                status: item.status,
                                strstatus: item.strstatus,
                                strstatusen: item.strstatusen,
                                totalad: item.totalad,
                                totaldistance: item.totaldistance,
                                totalnotrunningad: item.totalnotrunningad,
                                trackCount: item.trackCount,
                                trackid: item.trackid,
                                updatetime: item.updatetime,
                                weight: item.weight,
                                radius: item.radius,
                                recorderspeed: item.recorderspeed,
                                reissue: item.reissue,
                                voltage: item.voltage,
                                oilrate: item.oilrate,
                                direction: utils.getCarDirection(item.course),
                                _highlight: false,
                            }


                            track.callat = Number(track.callat.toFixed(5));
                            track.callon = Number(track.callon.toFixed(5));
                            track.totaldistance = Number((track.totaldistance / 1000).toFixed(3));

                            var totalad = track.totalad / 100;
                            var totalnotrunningad = track.totalnotrunningad / 100;
                            var ad0 = track.ad0;
                            var ad1 = track.ad1;
                            var ad2 = track.ad2;
                            var ad3 = track.ad3;
                            if (ad0 < 0) {
                                ad0 = 0;
                            };
                            if (ad1 < 0) {
                                ad1 = 0;
                            };
                            track.totalad = totalad;
                            track.totalnotrunningad = totalnotrunningad;
                            track.ad0 = ad0 / 100;
                            track.ad1 = ad1 / 100;
                            track.ad2 = ad2 / 100;
                            track.ad3 = ad3 / 100;

                            var g_lon_lat = wgs84togcj02(track.callon, track.callat);
                            track.gpoint = {
                                y: g_lon_lat[1],
                                x: g_lon_lat[0]
                            };

                            var lng_lat = wgs84tobd09(track.callon, track.callat);
                            track.bpoint = {
                                y: lng_lat[1],
                                x: lng_lat[0]
                            };
                            if (!isZh) {
                                track.strstatus = track.strstatusen;
                            }

                            if (track.gotsrc == "gps") {
                                track.isextract = true;
                                exactTracks.push(track);
                            } else {
                                track.isextract = false;
                            }
                            var address = LocalCacheMgr.getAddress(track.callon, track.callat);
                            track.updatetimeStr = "\t" + DateFormat.longToLocalDateTimeStr(track.updatetime);
                            track.gotsrcStr = utils.getPosiType(track);
                            track.speedStr = track.speed / 1000;
                            track.recorderspeedStr = track.recorderspeed / 1000;
                            track.address = address ? address : (isZh ? '点击一键获取' : 'Click query address');
                            allTracks.push(track);
                        }
                        this.allTracks = allTracks;
                        this.exactTracks = exactTracks;
                    },
                    changeIsFullMapIcon: function() {
                        var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
                        isFullscreen = !!isFullscreen;
                        return isFullscreen;
                    },
                    init: function() {
                        var me = this;
                        this.map = null;
                        this.carMarker = null;
                        this.startMarker = null;
                        this.endMarker = null;
                        this.lineLayer = null;
                        this.lineString = null;
                        this.markerLayer = null;
                        this.distanceTool = null;
                        this.timer = null;
                        this.mileageMonthRecord = {};
                        this.allTracks = [];
                        this.exactTracks = []
                        this.lastMapType = this.mapType;
                        this.isShowSpeed = true;
                        this.setTheDate();
                        this.initMap();
                        this.initCharts();
                        this.queryReportMileageDetail(new Date(this.year, this.month - 1, 1));
                        this.getFenceInfo();
                        this._queryGeoSystemRecords();
                        utils.sendAjax(myUrls.querySpeedLimitColors(), {
                            deviceid: this.deviceid
                        }, function(resp) {
                            var sliderValue = [resp.color1speed, resp.color2speed];
                            me.sliderValue = sliderValue;
                            $("#slider_wrapper").ionRangeSlider({
                                type: "double",
                                skin: "round",
                                grid: true,
                                min: 0,
                                max: 150,
                                from: sliderValue[0],
                                to: sliderValue[1],
                                prefix: "",
                                postfix: "Km/h",
                                decorate_both: true, // false,
                                onChange: function(data) {
                                    var sliderValue = [data.from, data.to];
                                    me.sliderValue = sliderValue;

                                }
                            });
                        })

                        document.addEventListener('fullscreenchange', function() {
                            me.isFullScreen = me.changeIsFullMapIcon();
                        })
                        document.addEventListener('mozfullscreenchange', function() {
                            me.isFullScreen = me.changeIsFullMapIcon();
                        })
                        document.addEventListener('webkitfullscreenchange', function() {
                            me.isFullScreen = me.changeIsFullMapIcon();
                        })
                        document.addEventListener('msfullscreenchange', function() {
                            me.isFullScreen = me.changeIsFullMapIcon();
                        })

                    },
                    getAllNoLoadingTracksAddress: function(isShowLoading, callback) {
                        var me = this;
                        var maxLen = this.currentTracksLenth;
                        if (maxLen == 0) return;
                        var tracks = this.getTypeRecords();
                        var filterTracks = [];
                        var unionPoints = [];

                        tracks.forEach(function(track) {
                            var address = LocalCacheMgr.getAddress(track.callon, track.callat);
                            if (address == null || track.address == "点击一键获取" || track.address == 'Click query address') {
                                filterTracks.push({
                                    lat: track.callat,
                                    lon: track.callon,
                                })
                            } else {
                                track.address = address;
                            }
                        });

                        unionPoints = utils.unionLonLat(filterTracks);
                        if (unionPoints.length) {
                            isShowLoading && (me.queryLoading = true);
                            var url = myUrls.poiBatch();
                            utils.sendAjax(url, {
                                points: unionPoints
                            }, function(respData) {
                                me.queryLoading = false;
                                if (respData.status == 0) {
                                    var points = respData.points;
                                    points.forEach(function(point) {
                                        LocalCacheMgr.setAddress(point.lon, point.lat, point.address);
                                    });
                                    me.readLocalAddress(tracks);
                                    callback && callback();
                                }
                            }, function() {
                                me.queryLoading = false;
                                callback && callback();
                            });
                        } else {
                            callback && callback();
                        }
                    },
                    onSelectFence: function(reuslt) {
                        this.fenceLayer2.clear();
                        var me = this;
                        var isBMap = utils.getMapType() == 'bMap';
                        var points = [];
                        var symbol = {
                            'lineColor': '#e4393c',
                            'lineWidth': 2,
                            'polygonFill': 'rgb(135,196,240)',
                            'polygonOpacity': 0.4
                        };
                        reuslt.forEach(function(element) {

                            switch (element.type) {
                                case 1:
                                    if (isBMap) {
                                        var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                    } else {
                                        var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                    }

                                    var point = {
                                        x: lon_lat[0],
                                        y: lon_lat[1]
                                    }
                                    points.push(point);
                                    new maptalks.Circle(point, element.radius1, {
                                        symbol: symbol
                                    }).addTo(me.fenceLayer2);
                                    me.addFenceLabel2(element.name, lon_lat);
                                    break;
                                case 2:
                                    var lon_lat_s = [];
                                    if (isBMap) {
                                        var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                        lon_lat_s = wgs84sToBdPoints(JSON.parse(element.points2));
                                    } else {
                                        var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                        lon_lat_s = wgs84sToGooglePoints(JSON.parse(element.points2));
                                    }
                                    points = points.concat(lon_lat_s);
                                    new maptalks.Polygon(lon_lat_s, {
                                        symbol: symbol
                                    }).addTo(me.fenceLayer2);
                                    me.addFenceLabel2(element.name, lon_lat);
                                    break;
                                case 6:
                                    if (isBMap) {
                                        var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                    } else {
                                        var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                    }
                                    points.push({
                                        x: lon_lat[0],
                                        y: lon_lat[1]
                                    });
                                    me.addPointToMap(element.name, lon_lat);
                                    break;
                            }

                        });
                    },
                    addPointToMap: function(name, lon_lat) {
                        new maptalks.Marker(
                            lon_lat, {
                                symbol: [{
                                    'markerFile': './images/map/marker_m.png',
                                    'markerWidth': 30,
                                    'markerHeight': 30,
                                    'markerRotation': 0,
                                    'markerDy': 0,
                                    'markerDx': 0,
                                }, {
                                    'textFaceName': 'sans-serif',
                                    'textName': name,
                                    'textSize': 12,
                                    'textDy': 10,
                                    'textFill': '#ffffff',
                                    'textOpacity': 1,
                                    'textHaloFill': '#00A8D4',
                                    'textHaloRadius': 5,
                                    'textWrapWidth': null,
                                    'textWrapCharacter': '\n',
                                    'textLineSpacing': 0,
                                }]

                            }
                        ).addTo(this.fenceLayer2)
                    },
                    getAllTracksAddress: function() {
                        this.getAllNoLoadingTracksAddress(true);
                    },
                    readLocalAddress: function(tracks) {
                        this.tableData.forEach(function(track) {
                            var callon = track.callon;
                            var callat = track.callat;
                            var address = LocalCacheMgr.getAddress(callon, callat);
                            if (track.address == "点击一键获取" || track.address == 'Click query address') {
                                track.address = address;
                            }
                        });
                        tracks.forEach(function(track) {
                            var callon = track.callon;
                            var callat = track.callat;
                            var address = LocalCacheMgr.getAddress(callon, callat);
                            if (track.address == "点击一键获取" || track.address == 'Click query address') {
                                track.address = address;
                            }
                        });
                    },
                    getAddress: function(info) {
                        var that = this;
                        var callon = info.callon;
                        var callat = info.callat;
                        var address = LocalCacheMgr.getAddress(callon, callat);
                        if (address !== null) {
                            return address;
                        }

                        if (this.isShowBubble) {
                            utils.getJiuHuAddressSyn(callon, callat, function(resp) {
                                address = resp.address;
                                if (resp.status > 9900) {
                                    console.log('getJiuHuAddressSyn token失效,请重新登录')
                                } else if (resp.status == 0 && address) {

                                    LocalCacheMgr.setAddress(callon, callat, address);

                                    var sContent = that.getInfoWindowContent(info);
                                    that.carMarker.setInfoWindow({
                                        'content': sContent,
                                        'width': 330,
                                        'autoOpenOn': 'click',
                                        'autoCloseOn': false,
                                        'animation': false,
                                        'autoPan': false,
                                        'animationDuration': 0,
                                    });

                                    if (that.isShowBubble) {
                                        that.carMarker.openInfoWindow();
                                    } else {
                                        that.carMarker.closeInfoWindow()
                                    };

                                    info.address = address;
                                } else {
                                    console.log('getJiuHuAddressSyn 查询地址失败')
                                }
                            });
                        }


                        return isZh ? "地址正在解析..." : "The address is being resolved..."
                    },
                    getInfoWindowContent: function(info) {
                        var address = this.getAddress(info);
                        var posiType = utils.getPosiType(info);
                        var color = '#515A6E';
                        var strstatus = null;
                        var parkingTime = info.endtime - info.starttime;
                        currentTrack = info;
                        if (info.radius > 0) {
                            var radiuDesc = null;
                            if (isZh) {
                                radiuDesc = ' (误差范围:' + info.radius + '米)';
                            } else {
                                radiuDesc = ' (Around:' + info.radius + 'm)';
                            }
                            posiType += radiuDesc;
                        };
                        if (isZh) {
                            strstatus = info.strstatus ? info.strstatus : '';
                        } else {
                            strstatus = info.strstatusen ? info.strstatusen : '';
                        }
                        if (localStorage.getItem(this.deviceid + '-' + info.trackid)) {
                            color = 'red';
                        };
                        if (info.gotsrc === 'gps' && info.gpsvalidnum > 0) {
                            posiType += "(" + info.gpsvalidnum + ")";
                        };
                        var videoState = isZh ? info.strvideoalarm : info.strvideoalarmen;
                        var oilStr = '';
                        if (isHasOil) {
                            oilStr = this.getOilStr(info);
                        };

                        var deviceid = "'" + this.deviceid + "'";
                        var speed = info.speed == 0 ? "0km/h" : (info.speed / 1000).toFixed(2) + "km/h";
                        var recorderspeed = info.recorderspeed == 0 ? "0km/h" : (info.recorderspeed / 1000).toFixed(2) + "km/h";
                        var sContent = '<div>' +
                            '<p><span class="window_title">' + (isZh ? '设备序号' : 'Device ID') + '</span>: ' + this.deviceid + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '经度纬度' : 'Coordinate') + '</span>: ' + info.callon + "," + info.callat + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '定位类型' : 'Position Type') + '</span>: ' + posiType + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '设备方向' : 'Direction') + '</span>: ' + utils.getCarDirection(info.course) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '实时速度' : 'Speed') + '</span>: ' + speed + '(' + (isZh ? '信号:' : 'Signal:') + info.rxlevel + '%)</p>' +
                            '<p><span class="window_title">' + (isZh ? '记录速度' : 'RecorderSpeed') + '</span>: ' + recorderspeed + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '总里程数' : 'Mileage') + '</span>: ' + (info.totaldistance == 0 ? 0 : info.totaldistance) + 'km</p>' +
                            '<p><span class="window_title">' + (isZh ? '更新时间' : 'Update Time') + '</span>: ' + DateFormat.longToLocalDateTimeStr(info.updatetime) + '</p>' +
                            '<p><span class="window_title">' + (isZh ? '设备状态' : 'Device Status') + '</span>: ' + strstatus + '</p>' +
                            (oilStr !== '' ? '<p>' + oilStr + '</p>' : '') +
                            (videoState ? '<p><span class="window_title">' + (isZh ? '视频状态' : 'Video') + '</span>: ' + videoState + '</p>' : '') +

                            (parkingTime > 60 * 1000 * Number(this.interval) ? '<p><span class="window_title">' + (isZh ? '停留时长' : 'Parking Period') + '</span>: ' + utils.timeStamp(parkingTime) + '</p>' : '') +
                            '<p class="last-address"> ' + address + '</p>' +
                            '<p>' +
                            '<span style="margin-right:5px;" class="ivu-btn ivu-btn-default ivu-btn-small" onclick="queryTrackDetail(' + deviceid + ')">' + (isZh ? '详细信息' : 'Detailed info') + '</span>' +
                            '<span class="ivu-btn ivu-btn-default ivu-btn-small" onclick="refreshTrackPosition(' + deviceid + ')" style="color:' + color + ';">' + (isZh ? '刷新位置' : 'Refresh Loc.') + '</span>' +
                            '</p>' +
                            '</div>';
                        return sContent;
                    },
                    getRarkingWindowContent: function(info) {
                        // var address = this.getAddress(info);
                        var sContent = '<div>' +
                            '<p> ' + (isZh ? '开始时间' : 'Start time') + ': ' + DateFormat.longToLocalDateTimeStr(info.starttime) + '</p>' +
                            '<p> ' + (isZh ? '结束时间' : 'End time') + ': ' + DateFormat.longToLocalDateTimeStr(info.endtime) + '</p>' +
                            '<p class="last-address"> ' + (isZh ? '详细地址' : 'Address') + ': ' + 'address' + '</p>' +
                            '</div>';
                        return sContent
                    },
                    getOilStr: function(track) {
                        var oilStr = '';

                        var totalOil = track.totalad;
                        var masteroil = track.ad0;
                        var auxoil = track.ad1;
                        var thirdoil = track.ad2;
                        var fourthoil = track.ad3;


                        if ((totalOil > 0) ||
                            (masteroil > 0) ||
                            (auxoil > 0) ||
                            (thirdoil > 0) ||
                            (fourthoil > 0)) {
                            var isNotFirst = false;
                            oilStr = '<span class="window_title">' + (isZh ? '油液数据' : 'Fuel') + '</span>: ';

                            if (totalOil > 0) {
                                oilStr += totalOil.toFixed(0) + "LT";
                                isNotFirst = true;
                            }
                            if (masteroil > 0) {
                                if (isNotFirst) {
                                    isNotFirst = true;
                                    oilStr += '/';
                                }
                                oilStr += masteroil.toFixed(0) + "L1";
                            }

                            if (auxoil > 0) {
                                if (isNotFirst) {
                                    isNotFirst = true;
                                    oilStr += '/';
                                }
                                oilStr += auxoil.toFixed(0) + "L2";

                            }
                            if (thirdoil > 0) {
                                if (isNotFirst) {
                                    isNotFirst = true;
                                    oilStr += '/';

                                }
                                oilStr += thirdoil.toFixed(0) + "L3";

                            }

                            if (fourthoil > 0) {
                                if (isNotFirst) {
                                    isNotFirst = true;
                                    oilStr += '/';

                                }
                                oilStr += fourthoil.toFixed(0) + "L4";

                            }

                        }
                        return oilStr;
                    },
                    addDistanceTool: function() {
                        this.distanceTool = new maptalks.DistanceTool({
                            'symbol': {
                                'lineColor': '#34495e',
                                'lineWidth': 2
                            },
                            'vertexSymbol': {
                                'markerType': 'ellipse',
                                'markerFill': '#1bbc9b',
                                'markerLineColor': '#000',
                                'markerLineWidth': 3,
                                'markerWidth': 10,
                                'markerHeight': 10
                            },

                            'labelOptions': {
                                'textSymbol': {
                                    'textFaceName': 'monospace',
                                    'textFill': '#fff',
                                    'textLineSpacing': 1,
                                    'textHorizontalAlignment': 'right',
                                    'textDx': 15,
                                    'markerLineColor': '#b4b3b3',
                                    'markerFill': '#000'
                                },
                                'boxStyle': {
                                    'padding': [6, 2],
                                    'symbol': {
                                        'markerType': 'square',
                                        'markerFill': '#000',
                                        'markerFillOpacity': 0.9,
                                        'markerLineColor': '#b4b3b3'
                                    }
                                }
                            },
                            'clearButtonSymbol': [{
                                'markerType': 'square',
                                'markerFill': '#000',
                                'markerLineColor': '#b4b3b3',
                                'markerLineWidth': 2,
                                'markerWidth': 15,
                                'markerHeight': 15,
                                'markerDx': 20
                            }, {
                                'markerType': 'x',
                                'markerWidth': 10,
                                'markerHeight': 10,
                                'markerLineColor': '#fff',
                                'markerDx': 20
                            }],
                            'language': isZh ? 'zh-CN' : 'en-US'
                        });
                        this.distanceTool.addTo(this.map);
                        this.distanceTool.disable();
                    },
                    getFenceInfo: function() {
                        var me = this;
                        var url = myUrls.queryGeoRecords();
                        utils.sendAjax(url, {
                            deviceid: deviceid
                        }, function(resp) {
                            var record = resp.records;
                            if (record) {
                                me.fenceRecords = record;
                            } else {
                                me.fenceRecords = [];
                            }
                        }, function() {
                            me.fenceRecords = [];
                        });
                    },
                    getPolygon: function(arr) {
                        return new maptalks.Polygon(arr, {
                            visible: true,
                            editable: true,
                            cursor: 'pointer',
                            shadowBlur: 0,
                            shadowColor: 'black',
                            draggable: false,
                            dragShadow: false, // display a shadow during dragging
                            drawOnAxis: null, // force dragging stick on a axis, can be: x, y
                            symbol: symbol
                        });
                    },
                    addFenceLabel: function(name, lon_lat) {
                        new maptalks.Label(name, lon_lat, {
                            'textSymbol': {
                                'textFaceName': 'monospace',
                                'textFill': '#34495e',
                                'textHaloFill': '#fff',
                                'textHaloRadius': 4,
                                'textSize': 12,
                                'textWeight': 'bold',
                                'textVerticalAlignment': 'top'
                            }
                        }).addTo(this.fenceLayer);
                    },
                    addFenceLabel2: function(name, lon_lat) {
                        new maptalks.Label(name, lon_lat, {
                            'textSymbol': {
                                'textFaceName': 'monospace',
                                'textFill': '#34495e',
                                'textHaloFill': '#fff',
                                'textHaloRadius': 4,
                                'textSize': 12,
                                'textWeight': 'bold',
                                'textVerticalAlignment': 'top'
                            }
                        }).addTo(this.fenceLayer2);
                    },
                    addDeviceidFenceToMap: function(selection) {
                        var me = this;
                        var isBMap = me.mapType == 'bMap';
                        if (selection.length) {
                            var allPointsExtends = [];
                            for (var index = 0; index < selection.length; index++) {
                                var element = selection[index];
                                switch (element.type) {
                                    case 1:
                                        me.radius = element.radius1;
                                        if (isBMap) {
                                            var lon_lat = wgs84tobd09(element.lon1, element.lat1);
                                        } else {
                                            var lon_lat = wgs84togcj02(element.lon1, element.lat1);
                                        }
                                        var point = {
                                            x: lon_lat[0],
                                            y: lon_lat[1]
                                        }
                                        var circle = new maptalks.Circle(point, element.radius1, {
                                            symbol: symbol,
                                            zIndex: 999
                                        }).addTo(this.fenceLayer);


                                        me.addFenceLabel(element.name, lon_lat);

                                        allPointsExtends.push(point);
                                        break;
                                    case 2:
                                        var lon_lat_s = [];
                                        if (isBMap) {
                                            lon_lat_s = wgs84sToBdPoints(JSON.parse(element.points2));
                                        } else {
                                            lon_lat_s = wgs84sToGooglePoints(JSON.parse(element.points2));
                                        }

                                        var polygon = new maptalks.Polygon(lon_lat_s, {
                                            symbol: symbol
                                        }).addTo(this.fenceLayer);

                                        me.addFenceLabel(element.name, [lon_lat_s[0].x, lon_lat_s[0].y]);

                                        allPointsExtends = allPointsExtends.concat(lon_lat_s);
                                        break;
                                    case 3:
                                        var adcode = element.adcode3;
                                        var isincludesub = 0;
                                        $.ajax({
                                            url: myUrls.queryGeoJson(adcode, isincludesub),
                                            async: true,
                                            success: function(json) {
                                                var coordinates = me.getAllCoordinates(json);
                                                var polygons = [];
                                                coordinates.forEach(function(item) {
                                                    var polygon = me.getPolygon([item]);
                                                    me.fenceLayer.addGeometry(polygon);
                                                    var coordinates = polygon.getCoordinates()[0];
                                                    if (coordinates && coordinates.length) {
                                                        coordinates.forEach(function(o) {
                                                            allPointsExtends.push({
                                                                x: o.x,
                                                                y: o.y,
                                                            })
                                                        });
                                                        if (!me.isPlaying) {
                                                            me.fitExtent(allPointsExtends);
                                                        }
                                                    }
                                                })
                                            },
                                            error() {}
                                        });
                                        break;
                                    case 4:
                                        var categoryid = element.categoryid4;
                                        var info = this.getTreeItemData(categoryid);

                                        if (info) {
                                            info.records.forEach(function(record) {
                                                switch (record.type) {
                                                    case 1:
                                                        if (isBMap) {
                                                            var lon_lat = wgs84tobd09(record.lon1, record.lat1);
                                                        } else {
                                                            var lon_lat = wgs84togcj02(record.lon1, record.lat1);
                                                        }

                                                        var point = {
                                                            x: lon_lat[0],
                                                            y: lon_lat[1]
                                                        }

                                                        var circle = new maptalks.Circle(point, record.radius1, {
                                                            symbol: symbol,
                                                            zIndex: 999
                                                        }).addTo(me.fenceLayer);

                                                        me.addFenceLabel(record.name, lon_lat);

                                                        allPointsExtends.push(point);
                                                        break;
                                                    case 2:
                                                        var lon_lat_s = [];
                                                        if (isBMap) {
                                                            lon_lat_s = wgs84sToBdPoints(JSON.parse(record.points2));
                                                        } else {
                                                            lon_lat_s = wgs84sToGooglePoints(JSON.parse(record.points2));
                                                        }

                                                        var polygon = new maptalks.Polygon(lon_lat_s, {
                                                            symbol: symbol
                                                        }).addTo(me.fenceLayer);

                                                        me.addFenceLabel(record.name, [lon_lat_s[0].x, lon_lat_s[0].y]);

                                                        allPointsExtends = allPointsExtends.concat(lon_lat_s);
                                                        break;
                                                    case 5:
                                                        var mapPoints = me.convertWgs84PointsToMapPoints(JSON.parse(record.points2));
                                                        allPointsExtends = allPointsExtends.concat(mapPoints);
                                                        new maptalks.LineString(
                                                            mapPoints, {
                                                                symbol: {
                                                                    'lineColor': {
                                                                        'type': 'linear',
                                                                        'colorStops': [
                                                                            [0.00, '#41B883'],
                                                                            [1.00, '#41B883']
                                                                        ]
                                                                    },
                                                                    'lineWidth': 2
                                                                }
                                                            }).addTo(me.fenceLayer);
                                                        var startCoordinate = mapPoints[0];
                                                        var endCoordinate = mapPoints[mapPoints.length - 1];
                                                        new maptalks.Marker(
                                                            [startCoordinate.x, startCoordinate.y], {
                                                                symbol: [{
                                                                    'markerFile': './images/map/marker_qidian.png',
                                                                    'markerWidth': 30,
                                                                    'markerHeight': 30,
                                                                    'markerRotation': 0,
                                                                    'markerDy': 0,
                                                                    'markerDx': 0,
                                                                }, {
                                                                    'textFaceName': 'sans-serif',
                                                                    'textName': '起点',
                                                                    'textSize': 12,
                                                                    'textDy': 10,
                                                                    'textFill': '#ffffff',
                                                                    'textOpacity': 1,
                                                                    'textHaloFill': '#00A8D4',
                                                                    'textHaloRadius': 5,
                                                                    'textWrapWidth': null,
                                                                    'textWrapCharacter': '\n',
                                                                    'textLineSpacing': 0,
                                                                }]

                                                            }
                                                        ).addTo(me.fenceLayer);
                                                        var totalDistance = record.totaldistance5;
                                                        var totalDuration = record.totalduration5;
                                                        new maptalks.Marker(
                                                            [endCoordinate.x, endCoordinate.y], {
                                                                symbol: [{
                                                                    'markerFile': './images/map/marker_zhongdian.png',
                                                                    'markerWidth': 30,
                                                                    'markerHeight': 30,
                                                                    'markerRotation': 0,
                                                                    'markerDy': 0,
                                                                    'markerDx': 0,
                                                                }, {
                                                                    'textFaceName': 'sans-serif',
                                                                    'textName': '总里程:' + (totalDistance / 1000).toFixed(2) + '公里,时长:' + utils.timeStamp(totalDuration * 1000),
                                                                    'textSize': 12,
                                                                    'textDy': 10,
                                                                    'textFill': '#ffffff',
                                                                    'textOpacity': 1,
                                                                    'textHaloFill': '#00A8D4',
                                                                    'textHaloRadius': 5,
                                                                    'textWrapWidth': null,
                                                                    'textWrapCharacter': '\n',
                                                                    'textLineSpacing': 0,
                                                                }]
                                                            }
                                                        ).addTo(me.fenceLayer);
                                                        break;
                                                }
                                            });
                                        }
                                        break;
                                    case 5:
                                        var mapPoints = me.convertWgs84PointsToMapPoints(JSON.parse(element.points2));
                                        allPointsExtends = allPointsExtends.concat(mapPoints);
                                        new maptalks.LineString(
                                            mapPoints, {
                                                symbol: {
                                                    'lineColor': {
                                                        'type': 'linear',
                                                        'colorStops': [
                                                            [0.00, '#41B883'],
                                                            [1.00, '#41B883']
                                                        ]
                                                    },
                                                    'lineWidth': 2
                                                }
                                            }).addTo(me.fenceLayer);
                                        var startCoordinate = mapPoints[0];
                                        var endCoordinate = mapPoints[mapPoints.length - 1];
                                        new maptalks.Marker(
                                            [startCoordinate.x, startCoordinate.y], {
                                                symbol: [{
                                                    'markerFile': './images/map/marker_qidian.png',
                                                    'markerWidth': 30,
                                                    'markerHeight': 30,
                                                    'markerRotation': 0,
                                                    'markerDy': 0,
                                                    'markerDx': 0,
                                                }, {
                                                    'textFaceName': 'sans-serif',
                                                    'textName': '起点',
                                                    'textSize': 12,
                                                    'textDy': 10,
                                                    'textFill': '#ffffff',
                                                    'textOpacity': 1,
                                                    'textHaloFill': '#00A8D4',
                                                    'textHaloRadius': 5,
                                                    'textWrapWidth': null,
                                                    'textWrapCharacter': '\n',
                                                    'textLineSpacing': 0,
                                                }]

                                            }
                                        ).addTo(me.fenceLayer);
                                        var totalDistance = element.totaldistance5;
                                        var totalDuration = element.totalduration5;
                                        new maptalks.Marker(
                                            [endCoordinate.x, endCoordinate.y], {
                                                symbol: [{
                                                    'markerFile': './images/map/marker_zhongdian.png',
                                                    'markerWidth': 30,
                                                    'markerHeight': 30,
                                                    'markerRotation': 0,
                                                    'markerDy': 0,
                                                    'markerDx': 0,
                                                }, {
                                                    'textFaceName': 'sans-serif',
                                                    'textName': '总里程:' + (totalDistance / 1000).toFixed(2) + '公里,时长:' + utils.timeStamp(totalDuration * 1000),
                                                    'textSize': 12,
                                                    'textDy': 10,
                                                    'textFill': '#ffffff',
                                                    'textOpacity': 1,
                                                    'textHaloFill': '#00A8D4',
                                                    'textHaloRadius': 5,
                                                    'textWrapWidth': null,
                                                    'textWrapCharacter': '\n',
                                                    'textLineSpacing': 0,
                                                }]
                                            }
                                        ).addTo(me.fenceLayer);
                                        break;
                                }
                            }


                            if (!this.isPlaying) {
                                this.fitExtent(allPointsExtends);
                                // this.map.fitExtent(allPointsExtends, 0);
                            }

                        }
                    },
                    getTreeItemData: function(categoryid) {
                        var result = null;
                        this.originalData.forEach(function(record) {
                            if (record.categoryid === categoryid) {
                                result = record;
                            }
                        });
                        return result;
                    },
                    _queryGeoSystemRecords: function() {
                        var url = myUrls.queryGeoSystemRecords(),
                            me = this;
                        utils.sendAjax(url, {}, function(resp) {
                            if (resp.status == 0) {
                                if (resp.categorys) {
                                    me.originalData = resp.categorys;
                                }
                            }
                        })
                    },
                    convertWgs84PointsToMapPoints: function(wgs84Ponts) {
                        var isBMap = this.mapType == 'bMap';
                        var mapPonts = [];
                        wgs84Ponts.forEach(function(point) {
                            var point = utils.getCurrentMapCoordinate(isBMap, [point.x, point.y]);
                            mapPonts.push({
                                x: point[0],
                                y: point[1],
                            })
                        });
                        return mapPonts;
                    },
                    getAllCoordinates: function(json) {
                        var outCoordinates = [];
                        var me = this;
                        var isBMap = me.mapType == 'bMap';
                        json.features.forEach(function(item) {
                            var geometry = item.geometry;
                            var coordinates = geometry.coordinates;
                            if (geometry.type == "Polygon") {
                                coordinates.forEach(function(coordinate) {
                                    var points = [];
                                    coordinate.forEach(function(point) {
                                        points.push(utils.getCurrentMapCoordinate(isBMap, point));
                                        // points.push(point);
                                    })
                                    outCoordinates.push(points);
                                })
                            } else if (geometry.type == "MultiPolygon") {
                                coordinates.forEach(function(coordinate) {
                                    var points = [];
                                    coordinate.forEach(function(pointArr) {
                                        pointArr.forEach(function(point) {
                                            points.push(utils.getCurrentMapCoordinate(isBMap, point));
                                            // points.push(point);
                                        })

                                    })
                                    outCoordinates.push(points);
                                })
                            }
                        })
                        return outCoordinates;
                    },
                    handleMapSizeChange: function() {
                        var mapWraper = this.$refs.mapWraper;
                        if (this.isFullScreen) {
                            this.exitFullscreen();
                            this.isFullScreen = false;
                        } else {
                            this.requestFullscreen(mapWraper);
                            this.isFullScreen = true;
                        }
                    },
                    exitFullscreen: function() {
                        if (document.exitFullscreen) {
                            document.exitFullscreen()
                        } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen()
                        } else if (document.webkitCancelFullScreen) {
                            document.webkitCancelFullScreen()
                        } else if (document.msExitFullscreen) {
                            document.msExitFullscreen()
                        }
                    },
                    requestFullscreen: function(mapWraper) {
                        if (mapWraper.requestFullscreen) {
                            mapWraper.requestFullscreen()
                        } else if (mapWraper.mozRequestFullScreen) {
                            mapWraper.mozRequestFullScreen()
                        } else if (mapWraper.webkitRequestFullScreen) {
                            mapWraper.webkitRequestFullScreen()
                        } else if (mapWraper.msRequestFullscreen) {
                            mapWraper.msRequestFullscreen()
                        }
                    },
                },
                computed: {
                    sliderLeft: function() {
                        var value = this.sliderValue[0];
                        return value / 150 * 100 + '%';
                    },
                    tabsHeight: function() {
                        return this.elementHeight - 530;
                    },
                    devicenameAndId: function() {
                        return this.devicename + '-' + this.deviceid;
                    },
                    dateStr: function() {
                        return this.year + '-' + (this.month > 9 ? this.month : '0' + this.month) + '-' + (this.date > 9 ? this.date : '0' + this.date);
                    },
                    playSpeedMillisecond: function() {
                        if (this.playSpeed == 'kuai') {
                            return 50;
                        } else if (this.playSpeed == 'zhong') {
                            return 300;
                        } else if (this.playSpeed == 'man') {
                            return 600;
                        }
                    },
                },
                watch: {
                    isShowBubble: function(newVal) {
                        if (this.carMarker != null) {
                            if (newVal) {
                                var tracks = this.getTypeRecords()
                                var sContent = this.getInfoWindowContent(tracks[this.currentMarkerIndex]);
                                this.carMarker.setInfoWindow({
                                    'content': sContent,
                                    'width': 330,
                                    'autoOpenOn': 'click', //set to null if not to open when clicking on marker
                                    'autoCloseOn': false, //set to null if not to open when clicking on marker
                                    'animation': false,
                                    'autoPan': false,
                                    'animationDuration': 0,
                                });
                                this.carMarker.openInfoWindow();
                            } else {
                                this.carMarker.closeInfoWindow();
                                this.globalInfoWindow.hide();
                            }
                        }
                    },
                    isOpenDistance: function(newVal) {
                        if (newVal) {
                            this.distanceTool.enable();
                        } else {
                            this.distanceTool.disable();
                        }
                    },
                    month: function() {
                        if (this.month > 12) {
                            this.year++;
                            this.month = 1;
                        } else if (this.month < 1) {
                            this.year--;
                            this.month = 12;
                        }

                        this.datesArr = this.getDatesArr();
                    },
                    playSpeed: function(newVal) {
                        var me = this;
                        if (newVal == 'kuai') {
                            this.map.setZoom(11);
                        } else if (newVal == 'zhong') {
                            this.map.setZoom(14);
                        } else if (newVal == 'man') {
                            this.map.setZoom(15);
                        };
                        if (me.isPlaying) {
                            setTimeout(function() {
                                me.stopPlay();
                                me.startedPlay();
                            }, 300)
                        }
                    },
                    isShowAllLine: function() {
                        this.redrawLines();
                    },
                    trackType: function() {
                        if (this.currentTracksLenth > 0) {
                            this.initMapView();
                            this.setTableData();
                        }
                    },
                    mapType: function(newMapType) {
                        var me = this;
                        var isBMap = this.lastMapType == 'bMap';
                        if (isBMap) {
                            if (me.currentTracksLenth > 0) {
                                me.initMapView();
                            }
                        } else {
                            if (newMapType == 'bMap') {
                                if (me.currentTracksLenth > 0) {
                                    me.initMapView();
                                }
                            }
                        }
                        if (this.isShowFence) {
                            this.map.removeLayer(this.fenceLayer);
                            this.fenceLayer = new maptalks.VectorLayer('fenceLayer').addTo(this.map);
                            this.fenceLayer.setZIndex(1111);
                            this.addDeviceidFenceToMap(this.fenceRecords);
                        }
                        me.lastMapType = newMapType;
                    },
                    isShowFence: function(value) {
                        if (value) {
                            // 创建fenceLayer图层并添加到地图  
                            this.fenceLayer = new maptalks.VectorLayer('fenceLayer').addTo(this.map);
                            this.fenceLayer.setZIndex(1111);
                            this.addDeviceidFenceToMap(this.fenceRecords);
                            // this.getFenceInfo();
                        } else {
                            this.map.removeLayer(this.fenceLayer);
                        }
                    },
                    isShowPark: function(newVal) {
                        var me = this;
                        me.parkingMarker.forEach(function(marker) {
                            if (newVal) {
                                marker.show();
                            } else {
                                marker.hide();
                            }
                        });
                    },
                },
                mounted: function() {
                    this.init();
                    if (isHasOil) {
                        var usoil1 = this.$t('main.oil1');
                        var usoil2 = this.$t('main.oil2');
                        var usoil3 = this.$t('main.oil3');
                        var usoil4 = this.$t('main.oil4');
                        var totalOil = this.$t('main.totalOil');
                        var notRunOil = this.$t('main.notRunOil');
                        columns.splice(8, 0, {
                            title: totalOil,
                            key: 'totalad',
                            width: 85
                        }, {
                            title: notRunOil,
                            key: 'totalnotrunningad',
                            width: 105
                        }, {
                            title: usoil1,
                            key: 'ad0',
                            width: 75
                        }, {
                            title: usoil2,
                            key: 'ad1',
                            width: 75
                        }, {
                            title: usoil3,
                            key: 'ad2',
                            width: 75
                        }, {
                            title: usoil4,
                            key: 'ad3',
                            width: 75
                        });
                    }
                }
            });
        })();
    </script>
</body>

</html>